Question

我正在学习vue.js。我正在尝试从数据动态构建表单。该表格是基于条件的。如果我从选择字段中选择某个字段，则必须显示与该选项相关的特定内容。

这是数据

如果对象“ id：2”的模型为“德国”，则必须将“ id：3”的显示变为真，并且将“ id：4”和“ id：5”的显示设为假。

同样，如果对象“ id：2”的模型为“ us”，则必须将id：4的显示变为真，而将“ id：3”和“ id：5”的显示设为假

new Text("")

此处是模板

  data(){
    return{
      fields: [
        {
          id: 1,
          type: "text",
          placeholder: "Name",
          model: "",
          show: true
        },
        {
          id: 2,
          type: "select",
          placeholder: "Select",
          model: "",
          show: true,
          options: [
            {value: "germany", text: "Gemany", id: "germany"},
            {value: "us", text: "United States", id: "us"},
            {value: "uk", text: "United Kingdom", id: "uk"}
          ],
          events: "onChange"
        },
        {
          id: 3,
          type: "paragraph",
          text: "Berlin",
          show: false
        },
        {
          id: 4,
          type: "paragraph",
          text: "New York",
          show: false
        },
        {
          id: 5,
          type: "paragraph",
          text: "London",
          show: false
        }
      ]
    }
  }

方法

<template>
  <div>
    <div class="" v-for="field in fields" :key="field.id">
      <input :type="field.type" :placeholder="field.placeholder" v-model="field.model" :id="field.id" v-if="field.type == 'text' && field.show">
      <select v-model="field.model" :id="field.id" v-if="field.type == 'select' && field.show" @change="onChange(field.id)">
        <option v-for="option in field.options" :key="option.id" :value="option.value" :id="option.id">{{option.text}}</option>
      </select>
      <p v-if="field.type == 'paragraph' && field.show" :id="field.id">{{field.text}}</p>
    </div>
    <button @click="submit">Submit</button>
  </div>
</template>

我该如何实现？谢谢。

Answer 1

v-model在select上会找到所选择的值。

首先，您可以添加一个新属性（例如option_id）以在您的选项字段id和段落字段option_id之间创建链接。
然后添加用于selectedOptionId的{{1}}数据以到达右侧的选定字段。

您现在可以将所选字段从v-model循环中删除，并删除v-for和show属性：

model

new Vue({
  el: "#app",
  data(){
    return{
      selectedOptionId: '',
      fields: [
        {
          id: 1,
          type: "text",
          placeholder: "Name",
          model: "",
        },
        {
          id: 2,
          type: "select",
          placeholder: "Select",
          options: [
            {value: "germany", text: "Gemany", id: "germany"},
            {value: "us", text: "United States", id: "us"},
            {value: "uk", text: "United Kingdom", id: "uk"}
          ]
        },
        {
          id: 3,
          option_id: "germany",
          type: "paragraph",
          text: "Berlin",
        },
        {
          id: 4,
          option_id: "us",
          type: "paragraph",
          text: "New York",
        },
        {
          id: 5,
          option_id: "uk",
          type: "paragraph",
          text: "London",
        }
      ]
    }
  },
  computed: {
    selectedField(){
      return this.fields.find(field =>  field.option_id == this.selectedOptionId)
    }
  }
})

Answer 2

这可能是一个解决方案：您可以在数据中添加变量idToShowMain，该变量是要显示的ID数组。您将使用默认的可视化效果对其进行初始化：

idToShowMain: [ 1,2 ],

然后在您的选项中，将为每个项目添加一个属性，并带有与该选项相关的数组。值更改后，您将用选定的阵列替换主阵列。

options: [
    {value: "germany", text: "Gemany", id: "germany", idToShow: [ 1,2,3 ] },
    {value: "us", text: "United States", id: "us", idToShow: [ 1,2,4 ] },
    {value: "uk", text: "United Kingdom", id: "uk", idToShow: [ 1,2 ] }
],

最后，您将通过以下方式更改模板：

<div class="" v-for="field in fields" :key="field.id" v-if="idToShowMain.includes(field.id)">

通过这种方式，您可以从每个字段中删除show属性。

希望这对您有所帮助。

如何在Vue.js中动态使用数据构建表单

2 个答案: