Vue.js 显示比较值的字段

我有一个数字（大小）字段，范围从0到7。我还有一个强度对象，它有两个字段（输入和输出），我想显示对象的数量与数字+1字段中的数量的关系 我可以用什么方法来解决我的问题

如果有人能为我提供解决方案，我会打个招呼。

当我选中“In=Out”复选框时，我还需要将与“In”相同的值赋给“Out”

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
<v-app >
<h1>Selection</h1>
<div v-for="car in cars">
  <v-select
    label="Selection"
    :items="car.version"
    item-text="color"
  >
  </v-select>
  <v-text-field
  label="Size"
  type="number"
  min="1"
  max="8"
  v-model="sizeValue">

  </v-text-field>
              <div v-for="(int, index) in intensity">
                <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-app>
</div>

---

为上述代码添加了修复程序

在此处使用代码笔：

挑选
增加强度




索引{index}
删除强度
新Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据：（）=>({
checkboxInOut:false，
checkboxAll:false，
sizeValue:0，
强度：[
{in:0，out:0}]，
汽车：[
{
姓名：'麦昆'，
版本：[
{颜色：'蓝色'}，
{颜色：'红色'}，
{颜色：'绿色'}，
{颜色：'紫色'}，
]
}
],
}),
方法：{
附加性（）{
this.$set（this.intensity，this.intensity.length，{in:0，out:0}）；
},
强度（指数）{
这是强度拼接（指数1）；
}
},
创建（）{
对于（var i=0；i{
x、 out=x.in；
});
}
}
}
})

你的问题不清楚，你能举例说明吗..不太清楚，我可以帮你，在skype上ping我：syed_Haroon我有一个数字字段，范围从0到7。我还有一个强度对象，它有两个字段（输入和输出）。我想显示与数字+1字段中的数字相关的对象数量。例如，在数字显示为2的字段中，我需要显示3个强度对象（2+1）@chans，你能帮我吗？

Vue.use(Vuetify);

var vm = new Vue({

  data() {
    return {
    checkboxInOut: false,
    checkboxAll: false,
    sizeValue: null,
    intensity:[
          {in: void 0, out:void 0}],
    cars: [
          {
          name: 'McQueen',
          version: [
          {color: 'blue' },                      
          {color: 'red' },
          {color: 'green' },
          {color: 'purple' },
          ]
         }
       ],
    }
  },
  methods: {

  }
})

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <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-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:[
          {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});
    }
  },
  watch: {
    checkboxInOut(val) {
      if (val) {
        this.intensity.forEach(x => {
          x.out  = x.in;
        });
      }
    }
  }
})