Question

我正在学习Vue，我正在尝试通过它的索引访问数组中的字符串，但是在尝试读取字符串时我总是遇到错误。这是我的代码：

var vm = new Vue({
    el: '#top',
    data: {
        Cars: [],
        DefaultCarList: [],
        AddedCars: [],
        SelectedCar: ''
    },
    methods: {
        addCar: function(car) {
            var addedCarCount = this.AddedCars.length;
            var defaultCarCount = this.DefaultCarList.length;

            var containsCar = function () {
                for (var i = 0; i < addedCarCount; i++)
                {
                    if (this.AddedCars[i] === car) // error here
                    {
                       return true;
                    }
                }
                return false;
            }

            var carIsValid = function() {
                for(var i = 0; i < defaultCarCount; i++)
                {
                   if(this.DefaultCarList[i] === this.SelectedCar) // error here
                   {
                       return true;
                   }  
                }
                return false;
            }
            if (containsCar() === false && carIsValid){
                this.AddedCars.push(car);
            }
        }
    }
})

HTML：

<label for="carsId">Cars</label>
            <select id="carsId" name="cars" v-model="SelectedCar">
                <option disabled value="">Select</option>
                <option v-for="car in DefaultCarList" :value="flavor">{{car}}</option>
            </select>
            <div>
                <button type="button" class="hollow button success small"
                        v-on:click="addCar(SelectedCar)">Add Flavor</button>
            </div>

在Vue中迭代这样的数组并通过它的索引访问属性是否有效？这样做的正确方法是什么？

Answer 1

问题出在＆＃39;这个＆＃39;它使用内部的关键字，它没有DefaultCarList变量，应该使用（）=＆gt;此代码中的{}语法.Error

var carIsValid = function() {
            for(var i = 0; i < defaultCarCount; i++)
            {
               if(this.DefaultCarList[i] === this.SelectedCar) // error here
               {
                   return true;
               }  
            }
            return false;
        }

应该是

var carIsValid = () => {
            for(var i = 0; i < defaultCarCount; i++)
            {
               if(this.DefaultCarList[i] === this.SelectedCar) // error here
               {
                   return true;
               }  
            }
            return false;
        }

和

var containsCar = () => {
            for (var i = 0; i < addedCarCount; i++)
            {
                if (this.AddedCars[i] === car) // error here
                {
                   return true;
                }
            }
            return false;
        }

Answer 2

问题在于this它不是您模型的参考。

在您的示例中，this是引用到window对象。

查看here，了解 javascript中this关键字的范围。

您应该使用arrow个功能。

var containsCar = () => {
      for (var i = 0; i < addedCarCount; i++)
      {
        if (this.AddedCars[i] === car) // error here
        {
            return true;
        }
      }
      return false;
}

或者您可以定义一个self变量。

var self=this;
var containsCar = function()  {
      for (var i = 0; i < addedCarCount; i++)
      {
        if (self.AddedCars[i] === car) // error here
        {
            return true;
        }
      }
      return false;
}

此外，我建议您使用native javascript functions以获得干净的代码。

var containsCar = function () {
      for (var i = 0; i < addedCarCount; i++)
      {
        if (this.AddedCars[i] === car) // error here
        {
            return true;
        }
      }
      return false;
}

var carIsValid = function() {
        for(var i = 0; i < defaultCarCount; i++)
        {
           if(this.DefaultCarList[i] === this.SelectedCar) // error here
           {
               return true;
           }  
        }
        return false;
 }

可以使用some方法实现：

some（）方法测试数组中是否至少有一个元素通过由提供的函数实现的测试。

var containsCar = () => {
      return this.AddedCars.some(a=>a==car);
}
var carIsValid = () => {
      return this.DefaultCarList.some(a=>a === this.SelectedCar);
}

获取数组的索引不起作用

2 个答案: