具有V-for循环传递v模型的Vue 2动态模型

时间:2017-05-04 11:05:35

标签: javascript vue.js vuejs2 vue-component

我正在使用v-for循环从vuex商店获取类别并以下拉形式显示,如下所示:

<label for="sub-category">
  <select name="sub-category" required>
    <option value="">Choose sub category</option>
    <option v-for="(sub, index) in subcategory" :key="index" :value="sub.value">{{ sub.name }}</option>
  </select>
  <span class="form-error">
    <p>You have to choose a sub-category</p>
  </span>
</label>

现在上面的一切工作正常,但现在我想将其值保存到data(),然后使用该数据发出请求。

我试过

export default {
  name: 'formPost',
  data() {
    return {
      selectedSubCat '',
      show: false,
    };
  },

  components: {
    Headers,
    Footers,
  },
};

然后在表单上添加一个v-model =“selectedSubCat”,但它不起作用。

我也尝试过:

<select name="sub-category" required>
    <option value="">Choose sub category</option>
    <option v-model="selectedSubCat[sub.value]" v-for="(sub, index) in subcategory" :key="index" :value="selectedSubCat">{{ sub.name }}</option>
  </select>

如何解决此问题?

我修复了它:(

<select name="sub-category" required v-model="selectedSubCat">
    <option value="">Choose sub category</option>
    <option v-for="(sub, index) in subcategory" :key="index" :value="selectedSubCat">{{ sub.name }}</option>
  </select>

我错过了它:( - 我必须从选择中获得价值......

1 个答案:

答案 0 :(得分:1)

这是我的问题的解决方案!

<select name="sub-category" required v-model="selectedSubCat">
    <option value="">Choose sub category</option>
    <option v-for="(sub, index) in subcategory" :key="index" :value="selectedSubCat">{{ sub.name }}</option>
  </select>