Vue - поддержка доступа в дочернем компоненте, обычный javascript

#javascript #vue.js

Вопрос:

Я загружаю компонент Vue из другого компонента Vue и передаю свойство этому компоненту. Мне нужно получить доступ к этому свойству в обычном javascript этого компонента, но я не могу понять, как это сделать.

Упрощенный родительский компонент может выглядеть следующим образом:

 <template>
  <div>
     <MenuEdit :menu-list="menuList"></MenuEdit>
  </div>
</template>

<script>
import MenuEdit from '@/components/MenuEdit';

export default {
  name: 'Admin',
  data: function () {
    return {
      menuList: ["Item1","Item2","Item3","Item4"]
    };
  },
  components: {
    MenuEdit
  }
}
</script>

<style scoped>
</style>

И меню может выглядеть следующим образом:

 <template>
  <div>
      {{ menuList }}
  </div>
</template>

<script>
//console.log(this.menuList) // Does not work.

export default {
  name: 'MenuEdit',
  props: [
      'menuList'
  ],
  methods: {
    testMenu: function() {
      console.log(this.menuList) //This works fine
    }
  }
}
</script>

<style scoped>
</style>

Редактировать

Чтобы добавить некоторый контекст к вопросу, я реализую sortablejs в Buefy, используя следующий пример: https://buefy.org/extensions/sortablejs

Вместо вызова «vnode.context. $buefy.toast.open( Moved ${item} from row ${evt.oldIndex 1} to ${evt.newIndex 1} )» в конце первого const, я хочу обновить компонент (или, лучше сказать, обновить связанный массив).

В примере const определены вне компонента, поэтому я задал этот вопрос.

1. Логика вашего компонента находится внутри фигурных скобок export default{...} outside, поэтому вы не можете получить доступ к свойствам компонента

2. Просто чтобы уточнить: вы используете здесь однофайловый компонент, верно?

3. чего вы хотите достичь?

4. если вы делаете это так, вы, вероятно, делаете что-то не так

5. Я добавил некоторый контекст к вопросу, включая официальную документацию, которую я использую. Но вполне возможно, что я делаю что-то не так, я просто не знаю, что…

Ответ №1:

Вы не можете получить доступ к реквизиту как к этому коду (где ваша консоль.log is) запускается до того, как компонент смонтирован, до того, как он даже объявлен на самом деле

Если вы хотите получить доступ к материалам при первом монтировании компонента, вы можете использовать метод mounted lifecycle