javascript - Vue.js 并根据其他字段更改输入字段

Question

我是 Vue.js 和 Vuetify.js 的新手，在执行以下操作时遇到一些问题:

<v-select v-model="car.type"
    :items="types"
    label="Type"
></v-select>

<div v-if="car.type === 'fiat'">
    <v-text-field v-model="car.km" label="KM"></v-text-field>
    <v-text-field v-model="car.color" label="Color"></v-text-field>
</div>

<div v-else-if="car.type === 'bmw'">
    <v-text-field v-model="car.color.first" label="First color"></v-text-field>
    <v-text-field v-model="car.color.second" label="Second color"></v-text-field>
</div>

它在某种程度上起作用，并且根据类型更改输入字段，但我收到错误:

[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating '_vm.car.color.first')"

如果我将 v-model 更改为 car.colorfirst，没有嵌套的 JSON 对象，它就可以工作。猜测是因为 car.color.first 尚未定义。 但我需要另一个才能工作。

该怎么办，希望它有意义？

现场演示:https://codepen.io/alfredballe84/pen/MBXwKx

Answer 1

我对你的 html 和 js 进行了更改

<div id="app">
  <v-app>
    <v-form>

      <v-select v-model="car.type" :items="types" label="Type"></v-select>

      <div v-if="car.type === 'fiat'">
        <v-text-field v-model="car.km" label="KM"></v-text-field>
        {{car.km}}
        <v-text-field v-model="car.color" label="Color"></v-text-field>
        {{car.color}}
      </div>

      <div v-else-if="car.type === 'bmw'">
        <v-text-field v-model="car.colorMore.first" label="First color"></v-text-field>
        {{car.colorMore.first}}
        <v-text-field v-model="car.colorMore.second" label="Second color"></v-text-field>
        {{car.colorMore.second}}
      </div>

    </v-form>
  </v-app>
</div>

以及在vuejs中

new Vue({
  el: "#app",
  data() {
    return {
      car: { "type": "fiat",color:"",colorMore:{} },
      types: ["fiat", "bmw"]
    };
  }
});

您需要创建一个空对象(此处为colorMore)来绑定(bind)，或者简单地使用一个元素(此处为color)来绑定(bind)。

codepen 中的 fork 网址:https://codepen.io/nikleshraut/pen/BPVNMv