динамически добавлять свойство к объекту в массиве - PullRequest
Новая
       5

динамически добавлять свойство к объекту в массиве

0 голосов
/ 29 марта 2020

Я пытаюсь добавить свойство в объект внутри массива, и я просто не могу заставить его работать:

Итак, я передаю массив в Names.vue, который содержит ['John', 'Jane'], и я пытается отобразить некоторые значки рядом с именем, когда пользователь наводит курсор на это имя: Живой пример проблемы

Имена. vue

<template>
  <div>
    <ul>
      <li v-for="(name, index) in names" :key="index">
        <span @mouseenter="name.showIcons = true" @mouseleave="name.showIcons = false">{{ name }}</span>
        <span v-if="name.showIcons" style="margin-left:10px">icons</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    names: Array
  }
};
</script>

Но это не работает? Почему?

Ответы [ 2 ]

0 голосов
/ 29 марта 2020

В качестве альтернативы - вы можете использовать this.$set: 

<template>
  <div id="app">
    <Names :names="names"/>
  </div>
</template>

<script>
import Names from "./components/Names";

export default {
  name: "App",
  components: {
    Names
  },
  data() {
    return {
      names: [{ name: "John" }, { name: "Jane" }]
    };
  }
};
</script>


<template>
  <div>
    <ul>
      <li v-for="(name, index) in names" :key="index">
        <span
          @mouseenter="setIconsState(index, true)"
          @mouseleave="setIconsState(index, false)"
        >{{ name.name }}</span>
        <span v-if="name.showIcons" style="margin-left:10px">icons</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    names: Array
  },
  methods: {
    setIconsState(index, isShow) {
      this.$set(this.names[index], `showIcons`, isShow);
    }
  }
};
</script>
0 голосов
/ 29 марта 2020

Вы не декларируете showIcons. Чтобы это исправить, обновите файл App.vue: 

data() {
    return {
         names: [
             { name: "John", showIcons: false },
             { name: "Jane", showIcons: false }
         ]
    };
}

И ваши имена. vue до: 

<template>
     <div>
          <ul>
               <li v-for="(name, index) in names" :key="index">
                    <span @mouseenter="name.showIcons = true" @mouseleave="name.showIcons = false">{{ name.name }}</span>
                    <span v-if="name.showIcons" style="margin-left:10px">icons</span>
               </li>
          </ul>
     </div>
</template>

<script>
export default {
     props: {
         names: Array
     }
};
</script>
...