Атрибут привязки цикла Vue v-for

Я пытаюсь понять, как это сделать в vue, я застрял, пытаясь привязать значение «выбранного» в параметрах.

В приведенном ниже упрощенном коде я получаю именно то, что хочу, но только для первого продукта. Он правильно связывается с первым вычисляемым свойством:

<template>
  <div>
    <div v-for="index in 2" :key="index">
      <select>
        <option :selected="product1 === ''">Empty</option>
        <option
          v-for="(product, index) of products"
          :key="index"
          :selected="product1 === product.name"
        >{{product.name}}</option>
      </select>
    </div>
  </div>
</template>

<script>
  // chosen products come from vuex store
  computed: {
    product1() {
      return store.state.product1;
    },
    product2() {
      return store.state.product2;
    },
  }
</script>

Но тогда как я могу изменить это на автоматическое в цикле v-for, возможно, используя индекс?

На самом деле мне нужен цикл, который будет отображать это:

<template>
  <div>
    <select>
      <option :selected="product1 === ''">Empty</option>
      <option
        v-for="(product, index) of products"
        :key="index"
        :selected="product1 === product.name"
        >{{product.name}}
      </option>
    </select>
    <select>
      <option :selected="product2 === ''">Empty</option>
      <option
        v-for="(product, index) of products"
        :key="index"
        :selected="product2 === product.name"
        >{{product.name}}
      </option>
    </select>
  </div>
</template>

Я пробовал использовать что-то вроде:

:selected="`product${index}` === product.name"

но это дает строку, а не вычисленное значение свойства...


vue.js v-for
person Thomas Miller    schedule 29.11.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

вы можете передать параметр своему вычисляемому свойству:

<template>
  <div>
    <div v-for="index in 2" :key="index">
      <select>
        <option :selected="getProduct(index) === ''">Empty</option>
        <option
          v-for="(product, index) of products"
          :key="index"
          :selected="getProduct(index) === product.name"
        >{{product.name}}</option>

<script>
  // chosen products come from vuex store
  computed: {
    getProduct() {
      return index=>
           store.state['product'+index];
    },
  }
</script>
person Efrat Levitan    schedule 29.11.2018
comment
Это было то, что мне нужно, чтобы заставить его работать. Я также понял, что у меня был индекс дважды, во вложенных циклах v-for, что также вызывало проблему. Большое спасибо! - person Thomas Miller; 29.11.2018
comment
Рад помочь. - person Efrat Levitan; 30.11.2018

arrow_upward
0
arrow_downward

Вы можете поместить выбранные продукты в массив, а затем получить к нему доступ по индексу:

computed: {
  selectedProducts () {
    return [store.state.product1, store.state.product2];
  }
}

И тогда вы можете сделать :selected="selectedProducts[index] === product.name".

person Psidom    schedule 29.11.2018