Vue级联自动完成对象键答案

【问题标题】：Vue Cascading Autocomplete object keysVue级联自动完成对象键
【发布时间】：2021-02-06 21:08:47
【问题描述】：

我尝试在 vue js 中进行 3 级或 4 级级联自动完成。但它不能正常工作。这里是 codepen

<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-card-text>
        <v-layout wrap>
          <v-flex xs3 md3>
            <v-autocomplete v-model="category" :items="categories" label="Category"  full-width solo hint="Random set of categories">
            </v-autocomplete>
          </v-flex>
          <v-flex xs3 md3>
            <v-autocomplete v-model="purpose" :items="purposes" label="Purpose"  full-width solo hint="Based on the selected category">
            </v-autocomplete>
          </v-flex>
        </v-layout>
      </v-card-text>
    </v-card>
  </v-app>
</div>

new Vue({
  el: "#app",
  data() {
    return {
      model: null,
      product: null,
      category: null,
      purpose: null,
      categoriesPurposes: {
        "Farm Animals": ["cow", "sheep", "hen"],
        Directions: ["left", "right", "up", "down"],
        Time: ["past", "present", "future"],
        Element: ["air", "water", "tierra", "fire"]
      }
    };
  },
  computed: {
    categories() {
      return Object.keys(this.categoriesPurposes);
    },
    purposes() {
      if (!this.category) {
        return null;
      } else {
        return this.categoriesPurposes[this.category];
      }
    }
  }
});

我尝试了 1 个更深的级别，但第二个自动完成看起来对象。

我更改了如下数据：

categoriesPurposes: {
        Asia:{
            "Farm Animals": ["cow", "sheep", "hen"],
            Directions: ["left", "right", "up", "down"],
            Time: ["past", "present", "future"],
            Element: ["air", "water", "tierra", "fire"]
          }
       }

但这次第二个自动完成数据似乎是对象

如何访问密钥并显示它们？谢谢。

【问题讨论】：

标签： javascript vue.js select autocomplete

【解决方案1】：

你给了一个对象，它是由 Vuetify 定义的非法值

[Vue warn]: Invalid prop: type check failed for prop 'items'. Expected Array, got Object

问题是您返回this.categoriesPurposes[this.category]，在您的情况下它是一个对象而不是对象数组。为了能够传递对象数组，您需要查看 Vuetify 的规范。

link to docs

这应该可以工作

      categoriesPurposes: {
        "Farm Animals": [
          {
            text: "This is the cow",
            value: "cow",
          },
          {
            text: "This is the sheep",
            value: "sheep",
          },
          {
            text: "This is the hen",
            value: "hen"
          }
        ],
        Directions: ["left", "right", "up", "down"],
        Time: ["past", "present", "future"],
        Element: ["air", "water", "tierra", "fire"]
      }

发了a working example here

【讨论】：

不起作用。我是新手，就像编码一样。我只想级联自动完成。搜索了一些codepen，发现发布了一个。所以我想用密钥更改为 3 级级联和包装数据。我知道我遗漏了一些东西，但我尝试了你的答案，但没有任何改变。无论如何，谢谢。
您想要 3 个输入还是 3 个选择？让我说得更清楚一点，是要在同一输入中选择 Asia 并子选择 Farm Animals，还是要为它们中的每一个输入一个输入？
抱歉没有说清楚。我想要 3 个选择，例如： parent-drop1 child-drop2 subchild-drop3 并且这 3 个自动完成功能会发送到父级到子级。如果父母改变，孩子和子孩子也会改变。