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

Struggling to make npm and sqlite3 function properly on MacOS Catalina

Minor Chrome compatibility problems with CSS alignment

Is the presence of an excessive number of arguments in the object that includes functions an instance

What are the steps for initializing a session in Vue.js with Django upon a successful login?

A Simple Guide to Setting a Background Image in React Native with the Nativebase.io Library

What is the best way to perform a callback after a redirect in expressjs?

Having an issue with the pop state function not functioning correctly

Data retrieval seems to be encountering issues in Firefox and IE9, whereas Chrome and Safari are functioning without any problems

Can you explain the functionality of sinon's stub.yields method?

Is it beneficial to utilize jQuery ahead of the script inclusions?

What factors contribute to a one-hour discrepancy between two time stamps, deviating from the anticipated value?

Modify the font style of numbers based on the keyboard language selected by the user

Modify a field within MongoDB and seamlessly update the user interface without requiring a page refresh

The requested resource at http://localhost/Grafica/%7Bd.icon%7D/ was not found (Error 404)

Update the WooCommerce shopping cart page automatically upon product removal

What would be the best way to structure this workflow as a JavaScript data format?

Automate CSS slideshow playback using JavaScript

use ajax to dynamically append a dropdown menu

Performing a count query with MongoDB Mongoose by grouping data based on multiple fields

Fascinating CSS rendering glitch observed on zooming in: all browsers create a noticeable gap between containers except for Firefox