Question

我在Vue JS的数组周围度过了一段可怕的时光。

new Vue({
  el: '#app',
  template: `
        <div class="cascading-dropdown">
            <div class="dropdown">
                <span>Cereal:</span>
                <select v-model="cerealname">
                    <option value="">SELECT A CEREAL</option>
                    <option v-for="(addon1_obj, addon1) in cereals" :value="addon1">{{addon1}}</option>
                </select>
            </div>
            <div class="dropdown">
                <span>Addon 1:</span>
                <select :disabled="addons1.length == 0" v-model="addon1">
                    <option value="">Select Addon 1</option>
                    <option v-for="(addon2_obj, addon2) in addons1">{{addon2}}</option>
                </select>
            </div>
            <div class="dropdown">
                <span>Addon 2:</span>
                <select :disabled="addons2.length == 0" v-model="addon2">
                    <option value="">Select Addon 2</option>
                    <option v-for="addon2 in addons2">{{addon2}}</option>
                </select>
            </div>
            <div class="dropdown">
                <span>Addon 3:</span>
                <select :disabled="addons2.length == 0" v-model="addon3">
                    <option value="">Select Addon 3</option>
                    <option v-for="addon2 in addons2">{{addon2}}</option>
                </select>
            </div>
            <div>Addon 1 text <input id="addon1desc" type="text" v-midel="addon1desc"></div>
            <div>Addon 2 text <input id="addon2desc" type="text" v-midel="addon2desc"></div>
            <div>Addon 3 text <input id="addon3desc" type="text" v-midel="addon3desc"></div>
        </div>
    `,
  data: function() {
    return {
      cereals: {
        "Lucky Charms": {
          "Marshmallows": ["Green Clovers",
            "Pink Hearts",
            "Yellow Moons",
            "Blue Diamonds",
            "Purple Horseshoes"
          ]
        },
        "Froot Loops": {
          "Loops": ["Red Loop",
            "Green Loop",
            "Blue Loop",
            "Yellow Loop"
          ]
        }
      },
      addons1: [],
      addons2: [],
      cerealname: "",
      addon1: "",
      addon2: "",
      addon3: ""
    }
  },
  watch: {
    cerealname: function() {
      // Clear previously selected values
      this.addons1 = [];
      this.addons2 = [];
      this.addon1 = "";
      this.addon2 = "";
      this.addon3 = "";
      // Populate list of countries in the second dropdown
      if (this.cerealname.length > 0) {
        this.addons1 = this.cereals[this.cerealname]
      }
    },
    addon1: function() {
      // Clear previously selected values
      this.addons2 = [];
      this.addon2 = "";
      this.addon3 = "";
      // Now we have a continent and country. Populate list of cities in the third dropdown
      if (this.addon1.length > 0) {
        this.addons2 = this.cereals[this.cerealname][this.addon1]
      }
    }
  }
})

.dropdown {
  margin: 10px 0;
  padding: 10px 0;
  border-bottom: 1px solid #DDD;
}

.dropdown span {
  display: inline-block;
  width: 80px;
}

<body>
  <div id="app"></div>
</body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>

这是一个小提琴：https://jsfiddle.net/4zfh80au/

当您在第一个下拉列表中选择Lucky Charms时，第二个下拉列表将变为Marshmallows。第3和第4个下拉菜单改为单个棉花糖类型。

我想要的是根据下拉选项将数据添加到文本框。当您选择第二个下拉列表为棉花糖时，我希望相应的文本框中填写一些文字，例如“棉花糖是美味的”。第3和第4个下拉列表也应该这样做。

有谁能指出我正确的方向？非常感谢。

Answer 1

已使用<select>，v-model="addon1"和addon2在每个addon3代码中设置了绑定。

在<div>中，文本字段中的绑定与<select>标记中定义的绑定相匹配，如下所示：

...
        <div class="dropdown">
            <span>Addon 1:</span>
            <select :disabled="addons1.length == 0" v-model="addon1">
                <option value="">Select Addon 1</option>
                <option v-for="(addon2_obj, addon2) in addons1">{{addon2}}</option>
            </select>
        </div>
        <div class="dropdown">
            <span>Addon 2:</span>
            <select :disabled="addons2.length == 0" v-model="addon2">
                <option value="">Select Addon 2</option>
                <option v-for="addon2 in addons2">{{addon2}}</option>
            </select>
        </div>
        <div class="dropdown">
            <span>Addon 3:</span>
            <select :disabled="addons2.length == 0" v-model="addon3">
                <option value="">Select Addon 3</option>
                <option v-for="addon2 in addons2">{{addon2}}</option>
            </select>
        </div>
        <div>Addon 1 text <input id="addon1desc" type="text" v-model="addon1"></div>
        <div>Addon 2 text <input id="addon2desc" type="text" v-model="addon2"></div>
        <div>Addon 3 text <input id="addon3desc" type="text" v-model="addon3"></div>
    </div>
...

您可以查看the working fiddle here.

此外，您分享的小提琴链接在v-model中有拼写错误。如果您运行该应用程序，您应该会在控制台中看到一个错误，如下所示：

[Vue warn]: Failed to resolve directive: midel 
(found in anonymous component - use the "name" option for better debugging messages.)

如果应用中的某些内容失败，您可以使用控制台更好地调试代码。

Answer 2

对于任何想要解决方案的人来说，小提琴就在这里： https://jsfiddle.net/q1jm0ccf/

该数组如下所示：

data: function() {
    return {
      cereals: {
        "Lucky Charms": {
          "Marshmallows": [
            {"title": "Green Clovers", "value": "The Green Clovers is nice"},
            {"title":"Pink Hearts", "value": "The Pink Hearts is cool"},
            {"title":"Yellow Moons", "value": "The Yellow Moons is best"},
            {"title":"Blue Diamonds","value": "The Blue Diamonds is bad"},
            {"title":"Purple Horseshoes","value": "The Purple Horseshoes is normal"},
            {"title":"Red","value": "The red ones are great."},
            {"title":"Yellow","value": "The yellow ones are better"}
          ]
        },
        "Froot Loops": {
          "Loops": [
          {"title":"Red","value": "Red loops are cherry"},
          {"title":"Green","value": "Green loops are lime"}
          ]
        }
      },

Vue JS数组格式

2 个答案: