Vue: Duplicating a div element with unique input fields upon clicking

Question

Vue: Duplicating a div element with unique input fields upon clicking

I have successfully set up a page where I can dynamically add a div/row of inputs by clicking the link. This feature works smoothly and adds the same div below the current one with all the proper inputs.

Additionally, one of the inputs is designed as an autosuggest/autocomplete search box, which also functions perfectly. When I type in the input, it searches and returns relevant results. Clicking on a result replaces the text in that input as expected.

While these two main functionalities are working flawlessly, I am facing an issue. When I add one or more divs, the text entered in each input reflects the same content. In other words, if I type 'Test' into the third row's input, it will appear in every div/row's input.

Is there a way to resolve this so that each added div's input displays its own text while still being added to the same v-model array?

javascript vue.js

Answer 1

Answer №1

new Vue({
  components: {},
  el: "#commonNameDiv",
  data() {
    return {
      searchString: [''],
      results: [],
      savedAttributes: [],
      cards: ['']
    }
  },
  methods: {
    autoComplete(index) {
      this.results = [];
      console.log(this.searchString[index]);
      if (this.searchString[index].length > 2) {
        this.results = [{
            attribute_value: "apple"
          },
          {
            attribute_value: "banane"
          }
        ]
      }
    },
    saveAttribute(result) {
      this.savedAttributes = [];
      console.log('cool');
      this.savedAttributes.push(result.attribute_value);
      console.log('here is the attribute');
      console.log(this.savedAttributes);
      this.searchString = result.attribute_value;
      this.results = [];
    },
    addCard: function() {
      this.cards.push({
        index: ''
      })
    }


  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="commonNameDiv">
  <div v-for="(card,index) in cards" class="uk-grid">
    <div class="uk-width-2-10">
      <input size="4" type="text" name="mapNumber">
    </div>
    <div class="uk-width-6-10">
      <input style="width:100%" type="text" placeholder="what are you looking for?" v-model="searchString[index]" v-on:keyup="autoComplete(index)" class="form-control">
      <div class="panel-footer componentList" v-if="results.length">
        <ul class="list-group">
          <li class="list-group-item" v-for="result in results">
            <a v-on:click="saveAttribute(result)">@{{ result.attribute_value }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="uk-width-2-10" style="border: 1px solid black; height:50px; width: 50px; margin: 0 auto;">

    </div>
  </div>

  <div style="height: 35px;">

  </div>

  <div>
    <a v-on:click="addCard">Add another zone</a>
  </div>
</div>

Answer 2

new Vue({
  components: {},
  el: "#commonNameDiv",
  data() {
    return {
      searchString: [''],
      results: [],
      savedAttributes: [],
      cards: ['']
    }
  },
  methods: {
    autoComplete(index) {
      this.results = [];
      console.log(this.searchString[index]);
      if (this.searchString[index].length > 2) {
        this.results = [{
            attribute_value: "apple"
          },
          {
            attribute_value: "banane"
          }
        ]
      }
    },
    saveAttribute(result) {
      this.savedAttributes = [];
      console.log('cool');
      this.savedAttributes.push(result.attribute_value);
      console.log('here is the attribute');
      console.log(this.savedAttributes);
      this.searchString = result.attribute_value;
      this.results = [];
    },
    addCard: function() {
      this.cards.push({
        index: ''
      })
    }


  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="commonNameDiv">
  <div v-for="(card,index) in cards" class="uk-grid">
    <div class="uk-width-2-10">
      <input size="4" type="text" name="mapNumber">
    </div>
    <div class="uk-width-6-10">
      <input style="width:100%" type="text" placeholder="what are you looking for?" v-model="searchString[index]" v-on:keyup="autoComplete(index)" class="form-control">
      <div class="panel-footer componentList" v-if="results.length">
        <ul class="list-group">
          <li class="list-group-item" v-for="result in results">
            <a v-on:click="saveAttribute(result)">@{{ result.attribute_value }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="uk-width-2-10" style="border: 1px solid black; height:50px; width: 50px; margin: 0 auto;">

    </div>
  </div>

  <div style="height: 35px;">

  </div>

  <div>
    <a v-on:click="addCard">Add another zone</a>
  </div>
</div>

Answer 3

Answer №2

If you are experiencing issues, it might be because your cards are connected to the single data property searchString through v-model. To resolve this issue, each card should be linked to its own individual property.

To address this, consider adding a new property to every object within your cards array. This can be accomplished within the addCard method. For example:

addCard: function () {
  this.cards.push({searchString: ''}) // assign a unique searchString value to each card
}

In your template, it would look something like this:

<div v-for="(card,index) in cards" class="uk-grid">
...
  <div class="uk-width-6-10">
    <input ... v-model="card.searchString"> // connect input value to each card's specific searchString property
...
<div>
    <a v-on:click="addCard">Add another zone</a>
</div>
...

Following these steps should help resolve the problem you are facing.

Answer 4

If you are experiencing issues, it might be because your cards are connected to the single data property searchString through v-model. To resolve this issue, each card should be linked to its own individual property.

To address this, consider adding a new property to every object within your cards array. This can be accomplished within the addCard method. For example:

addCard: function () {
  this.cards.push({searchString: ''}) // assign a unique searchString value to each card
}

In your template, it would look something like this:

<div v-for="(card,index) in cards" class="uk-grid">
...
  <div class="uk-width-6-10">
    <input ... v-model="card.searchString"> // connect input value to each card's specific searchString property
...
<div>
    <a v-on:click="addCard">Add another zone</a>
</div>
...

Following these steps should help resolve the problem you are facing.

Answer 5

Answer №3

Let's define searchString as an array and utilize the v-model with

v-model="searchString[index]"

. Below is the functional code snippet.

new Vue({
  components: {},
  el: "#commonNameDiv",
  data() {
    return {
      searchString: [' '],
      results: [],
      savedAttributes: [],
      cards: []
    }
  },
  methods: {
    autoComplete() {
      this.results = [];
      console.log(this.searchString);
      if (this.searchString.length > 2) {
        axios.get('/product/parts/components/search', {
          params: {
            searchString: this.searchString
          }
        }).then(response => {
          this.results = response.data;
          console.log(this.results);
          console.log(this.searchString);
        });
      }
    },
    saveAttribute(result) {
      this.savedAttributes = [];
      console.log('cool');
      this.savedAttributes.push(result.attribute_value);
      console.log('here is the attribute');
      console.log(this.savedAttributes);
      this.searchString = result.attribute_value;
      this.results = [];
    },
    addCard: function() {
      this.cards.push({
        index: ''
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='commonNameDiv'>
  <div v-for="(card,index) in cards" class="uk-grid">
    <div class="uk-width-2-10">
      <input size="4" type="text" name="mapNumber">
    </div>
    <div class="uk-width-6-10">
      <input style="width:100%" type="text" placeholder="what are you looking for?" v-model="searchString[index]" v-on:keyup="autoComplete" class="form-control">
      <div class="panel-footer componentList" v-if="results.length">
        <ul class="list-group">
          <li class="list-group-item" v-for="result in results">
            <a v-on:click="saveAttribute(result)">@{{ result.attribute_value }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="uk-width-2-10" style="border: 1px solid black; height:50px; width: 50px; margin: 0 auto;">

    </div>
  </div>

  <div>
    <a v-on:click="addCard">Add another zone</a>
  </div>
</div>

Answer 6

Let's define searchString as an array and utilize the v-model with

v-model="searchString[index]"

. Below is the functional code snippet.

new Vue({
  components: {},
  el: "#commonNameDiv",
  data() {
    return {
      searchString: [' '],
      results: [],
      savedAttributes: [],
      cards: []
    }
  },
  methods: {
    autoComplete() {
      this.results = [];
      console.log(this.searchString);
      if (this.searchString.length > 2) {
        axios.get('/product/parts/components/search', {
          params: {
            searchString: this.searchString
          }
        }).then(response => {
          this.results = response.data;
          console.log(this.results);
          console.log(this.searchString);
        });
      }
    },
    saveAttribute(result) {
      this.savedAttributes = [];
      console.log('cool');
      this.savedAttributes.push(result.attribute_value);
      console.log('here is the attribute');
      console.log(this.savedAttributes);
      this.searchString = result.attribute_value;
      this.results = [];
    },
    addCard: function() {
      this.cards.push({
        index: ''
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='commonNameDiv'>
  <div v-for="(card,index) in cards" class="uk-grid">
    <div class="uk-width-2-10">
      <input size="4" type="text" name="mapNumber">
    </div>
    <div class="uk-width-6-10">
      <input style="width:100%" type="text" placeholder="what are you looking for?" v-model="searchString[index]" v-on:keyup="autoComplete" class="form-control">
      <div class="panel-footer componentList" v-if="results.length">
        <ul class="list-group">
          <li class="list-group-item" v-for="result in results">
            <a v-on:click="saveAttribute(result)">@{{ result.attribute_value }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="uk-width-2-10" style="border: 1px solid black; height:50px; width: 50px; margin: 0 auto;">

    </div>
  </div>

  <div>
    <a v-on:click="addCard">Add another zone</a>
  </div>
</div>

Vue: Duplicating a div element with unique input fields upon clicking

Answer №1

Answer №2

Answer №3

Similar questions

What methods can I use to retrieve traversed objects using riak-js?

Sending text from a Tinymce textarea using Laravel 4.2

Utilizing jQuery.ajax to Send an Array of Objects to a PHP Function

Utilizing various colors for tooltipFontColor in Chart.js

Tips for implementing autocomplete functionality in AngularJS input fields

"Learn how to position a div element below the header div and above the footer div while maintaining full height in

Is it safe to securely store connection credentials in javascript?

Having issues with inline conditional statements in Angular 5

Struggling to integrate vue js into Laravel

The Google Docs viewer is displaying an empty screen

Are you experiencing issues with your Ajax request?

Adding event listeners for elements inside slots in Vue.js: A step-by-step guide

Can SailsJS be used exclusively for API processes?

Secondary Form Checkbox Input

Tips for accessing the 'styled' function in Material UI ReactHow to utilize the 'styled' function

React and SASS - issue with checkbox component not being properly aligned with its label

Tips for shortening extra text in a non-wrapping HTML table cell and adding "..." at the end

Retrieving JSON Arrays in PHP through an AJAX Request

What is the method to access the information within the observer?

What is preventing me from accessing the props of my functional component in an event handler?