Vue Dynamic V-For Показать и скрыть div - PullRequest
Новая
       8

Vue Dynamic V-For Показать и скрыть div

0 голосов
/ 14 октября 2019

Я хотел бы показать один div и скрыть другой, когда я нажимаю на него. Что происходит, хотя: у меня есть список пользователей, у каждого пользователя есть значок рядом с его именем. Нажатие на один значок меняет его для каждого пользователя (потому что при нажатии на значок он должен скрыть его и показать другой значок). Так как же мне отличить их? Информация: Мой журнал консоли работает, он показывает разных пользователей, но как мне отличить директиву v-show? 

    <template>
  <span>
    <span class="userListContent" v-for="user in this.userResults" :key="user.id">
      <a :href="'/profile/'+user.id" target="blank">{{user.name}}</a>
      <i v-show="visibleBefore" @click="visibleAfter = true" class="far fa-plus"></i>
      <i v-show="visibleAfter" class="far fa-check-circle"></i>
      <input type="checkbox" />
    </span>
  </span>
</template>

<script>
export default {
  props: ["userResults"],
  data: function() {
    return {
        visibleBefore: true,
        visibleAfter: false
    };
  },
  methods: {
    change(user) {
      console.log(user);
      //   this.visibleBefore = false;
      //   this.visibleAfter = true;
    }
  }
};
</script>

<style>
</style>

Я также пытался включить объект пользователя в функцию данных, но это, кажется, полностьюнеправильно. Заранее спасибо

Ответы [ 3 ]

2 голосов
/ 14 октября 2019

попробуйте этот код: 

<template>
  <div>
    <div v-for="user in users" :key="user.id">
      {{user.name}}
      <template v-if="user.visible">
        <button @click="onClick(user.id)">Show</button>
        {{user.email}}
      </template>
      <template v-if="! user.visible">
        <button @click="onClick(user.id)">Hide</button>
        {{user.phonr}}
      </template>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClick(id) {
      this.users.map(user => {
        if(id = user.id) {
          user.visible = !!! user.visible
        }
      })
    },
  }
}
</script>

Вам необходимо поместить visible function в вашу базу данных, или вы можете вставить их в data object в качестве другого поля. Затем вы можете переключить visible.

1 голос
/ 14 октября 2019

Лучший способ - создать UserListItem компонент, который получает пользователя в качестве реквизита: 

<template v-for="user in this.userResults" :key="user.id">
  <user-list-item :user="user"/>
</template>

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

// UserListItem.vue
<template>
  <span class="userListContent">
    <a :href="'/profile/'+user.id" target="blank">{{user.name}}</a>
    <i @click="showPlusIcon = !showPlusIcon" class="far" :class="iconId"></i>
    <input type="checkbox" />
  </span>
</template>
<script>
  export default {
    props: {
      user: {
        type: Object,
        required: true
      }
    },
    data () {
      return {
        showPlusIcon: true
      }
    },
    computed: {
      iconId () {
        return this.showPlusIcon ? 'fa-plus' : 'fa-check-circle'
      }
    }
  }
</script>
1 голос
/ 14 октября 2019

Вы можете использовать v-if внутри v-для ответа @ code-for-money дал, но он мог бы использовать v-else вместо того, чтобы писать v-if дважды. 

v-if="user.visible"
v-else

проверить документация объясняет все возможные варианты

...