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>

它有些起作用，并且正在根据type更改输入字段，但出现错误：

[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）进行绑定，或仅使用一个元素（此处为color）进行绑定。

codepen中的分叉网址：https://codepen.io/nikleshraut/pen/BPVNMv

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

1 个答案: