Vue js, how to bind input value from array?-CodePudding

i have a number field, that i want to bind value from an array like this :

<div v-for="p in products">
    <input type="number" :value="carModel[p.name]" />
</div>

where p.name is a string (product name), car_a :

const app = Vue.createApp({
        data() {
            return {
                products: {...},
                carModel:[{car_a:4}, {car_b:2} ]
            }
        }
...

But this does not works, the input remains empty, while following runs without issue :

<div v-for="p in products">
    <input type="number" :value="carModel" />
</div>

const app = Vue.createApp({
        data() {
            return {
                products: {...},
                carModel:4
            }
        }
...

So, my question is, how to bind the value properly from array if i have the key ?

thank you

CodePudding user response：

I'm no Javascript or Vue.js expert, but your carModel object structure looks somewhat odd to me. Better perhaps would be something like:

  products: ["car_a", "car_b"],
  carModel: [
    {
      name: "car_a",
      value: 4,
    },
    {
      name: "car_b",
      value: 2,
    },
    {
      name: "car_c",
      value: 3,
    },
  ]

I assume that the Strings held in the products array are a sub-set of the Strings in the carModel array of objects, and since you want an input that is reactive with the data, you will want the input's model to be the values held by each carModel object. So rather than v-for loop over the products array, v-for loop over the carModel but filter out the elements whose Strings are not held by the products array. Since we should not combine v-for with v-if, this filtering should be done in a computed property:

  computed: {
    filteredCarModel() {
      return this.carModel.filter(cm => {
        return this.products.includes(cm.name);
      });
    }
  },

so then in the HTML template you can loop over the computed property:

    <div v-for="cm in filteredCarModel" :key="cm">
      <label :for="cm.name">{{ cm.name }} </label>
      <input type="number" :id="cm.name" v-model="cm.value" />
    </div>

This will display proper values in the input elements, and these elements will remain reactive to the model such that changes to the inputs will cause changes to the data model, and visa-versa.

CodePudding user response：

change your carModel to hash

carModel: { 'car_a': 4, 'car_b': 2 }

because what you are trying to do is access array by string(which it should be number as index of the array)