Vue v-for атрибут связывания цикла - PullRequest
Новая
       7

Vue v-for атрибут связывания цикла

0 голосов
/ 29 ноября 2018

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

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

<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"

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

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

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

<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>
0 голосов
/ 29 ноября 2018

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

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

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

...