Question

我对Vue Js还是很陌生，我正在尝试从方法中访问数组中的属性（包含布尔值），因此我可以在单击按钮时更改布尔值，但是我不确定如何访问它。

export default {
  name: 'app',

  data() {
    return {

      leftImg: [
        {
          english: 'School',
          welsh: 'Ysgol',
          id: 'school',
          url: require('./img/school.jpg'),
          tag: 'left',
          displayEnglish: true,

        },
  methods: {
    changeEnglish () {
    this.leftImg.displayEnglish = false //This doesn't work
    },
  }

Answer 1

您提供的代码有多个问题。首先，请确保具有正确的javascript语法。仅从您的语法来看，您的代码将如下所示：

export default {
    name: 'app',

    data() {
        return {
            leftImg: [
                {
                    english: 'School',
                    welsh: 'Ysgol',
                    id: 'school',
                    url: require('./img/school.jpg'),
                    tag: 'left',
                    displayEnglish: true,

                }
            ]
        }
    },
    methods: {
        changeEnglish() {
            this.leftImg.displayEnglish = false //This doesn't work
        },
    }
}

第二，正如您在问题中所说的，leftImg属性是一个数组。因此，您应该确保指定要在此数组的哪个索引上更新displayEnglish属性。如果您想更新数组的第一项，则必须编写：

this.leftImg[0].displayEnglish = false

如果是第二个，应该写

this.leftImg[1].displayEnglish = false

依此类推...

Answer 2

leftImg是一个数组。您不能直接分配数组元素的值，因此在分配值之前，应先对其进行索引。

要更改数组的第一项，可以使用类似的

    this.leftImg[0].displayEnglish = false

但是，如果数组中只有一项，最好将leftImg设置为Object。像：

    data() {
      return {
       leftImg:
            {
                english: 'School',
                welsh: 'Ysgol',
                id: 'school',
                url: require('./img/school.jpg'),
                tag: 'left',
                displayEnglish: true
            }
          }
      }

根据您的用例进行更改。：）

如何从Vue js中的方法访问数组中的属性？

2 个答案: