Блог

Я довольно новичок в 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
    },
  }  

У вас есть несколько проблем с предоставленным вами кодом. Прежде всего, убедитесь, что у вас правильный синтаксис 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
  

И так далее…

leftImg является массивом. Вы не можете присвоить значение элементу массива напрямую, поэтому перед присвоением значения вы должны его проиндексировать.

чтобы изменить первый элемент массива, вы можете использовать что-то вроде,

     this.leftImg[0].displayEnglish = false
  

Но, если у вас есть только один элемент в массиве, лучше создайте leftImg как объект. Нравится:

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

Внесите изменения в соответствии с вашими вариантами использования. 🙂