Question

我需要显示一些内容，具体取决于下拉菜单的选择。

例如，如果我选择蓝色，我想要一个蓝色菜单，如果红色菜单是红色...

每个选择必须具有用于绑定对象的索引，但我迷路了

现在选择菜单仅显示颜色，但无处显示

如果您中的某人有解决方案

<div id="app">
      <v-app id="inspire">
          <h1>Selection</h1>
    <div v-for="car in cars">
      <v-select
        label="Selection"
        :items="car.version"
        item-text="color"
      >
      </v-select>
      <v-btn @click="addIntensity">
        add intensity
      </v-btn>
      <br>
      <br>

      </v-text-field>
      <div v-for="(int, index) in intensity">
        index{{index}}
        <v-btn @click="delIntensity(index)">
        delete intensity
      </v-btn>
        <v-text-field
                      label="In"
                      type="number"
                      min="1"
                      max="100"
                      v-model="int.in">
        </v-text-field>
        <v-text-field
                      label="Out"
                      type="number"
                      min="1"
                      max="100"
                      v-model="int.out">
        </v-text-field>
      </div>
    </div>
      </v-app>
    </div>

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
        sizeValue: 0,
        intensity:[
              {in: 0, out: 0}],
        cars: [
              {
              name: 'McQueen',
              version: [
              {color: 'blue' },                      
              {color: 'red' },
              {color: 'green' },
              {color: 'purple' },
              ]
             }
           ],
      }),
      methods: {
        addIntensity() {
          this.$set(this.intensity, this.intensity.length, {in: 0, out: 0});
        },
        delIntensity(index) {
          this.intensity.splice(index, 1);
        }
      },
      created() {
        for(var i = 0; i <= val;i++){
          this.$set(this.intensity, i, {in: 0, out: 0});
        }
      },
    })

Answer 1

将强度数组替换为对象，并将键动态设置为所选颜色，将值动态设置为强度

在下面的代码中，我通过使用this。$ set

动态设置了vue反应性数据。

此处工作的Codepen：https://codepen.io/chansv/pen/XWWermb?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <h1>Selection</h1>
<div v-for="car in cars">
  <v-select
    v-model="selectedColor"
    label="Selection"
    :items="car.version"
    item-text="color"
  >
  </v-select>
  <v-btn @click="addIntensity" v-if="selectedColor">
    add intensity
    </v-btn>
    <br>
    <br>
  <div v-for="(int, index) in intensity[selectedColor]">

    Index - {{index}}
    <v-btn @click="delIntensity(index)">
    delete intensity
  </v-btn>
    <v-text-field
                  label="In"
                  type="number"
                  min="1"
                  max="100"
                  v-model="int.in">
    </v-text-field>
    <v-text-field
                  label="Out"
                  type="number"
                  min="1"
                  max="100"
                  v-model="int.out">
    </v-text-field>
  </div>
</div>
        <v-checkbox label="Apply to All" v-model="checkboxAll"></v-checkbox>
        <v-checkbox label="In = Out" v-model="checkboxInOut"></v-checkbox>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    checkboxInOut: false,
    checkboxAll: false,
    sizeValue: 0,
    intensity:{},
    selectedColor: '',
    cars: [
          {
          name: 'McQueen',
          version: [
          {color: 'blue' },                      
          {color: 'red' },
          {color: 'green' },
          {color: 'purple' },
          ]
         }
       ],
  }),
  methods: {
    addIntensity() {
      this.$set(this.intensity[this.selectedColor], this.intensity[this.selectedColor].length, {in: 0, out: 0});
    },
    delIntensity(index) {
      this.intensity[this.selectedColor].splice(index, 1);
    }
  },
  watch: {
    checkboxInOut(val) {
      if (val) {
        this.intensity[this.selectedColor].forEach(x => {
          x.out  = x.in;
        });
      }
    },
    selectedColor(val) {
      if (!this.intensity[val]) {
        this.$set(this.intensity, val, [{in: 0, out: 0}]);
      }
    }
  }
})

显示项目取决于选择的选择

1 个答案: