Как правильно делать элементы Dynami c в выражении v-if? - PullRequest
Новая
       20

Как правильно делать элементы Dynami c в выражении v-if?

0 голосов
/ 09 февраля 2020

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

<template>
<div id="transfer-time">
      <div class="content has-left-text">
          <div v-if="transfer === true"  v-bind:class="{'darkQues': darkMode}" >
                <p>you need to email {{ this.name }} for further assistance.</p>
                    <center><b>email {{ this.email }}</b></center>
          </div>
      </div>
  </div>
</template>
<script>
  var transfer = {
      transferName: function(xfer) {
        return this.name + "" , this.email + "";
        }
      }
  var xfer = [{
    name: "john doe",
    email: "1@example.com"
  }, 
  {
    name: "john dope",
    email: "2@example.com"
  },
  {
    name: "jane doe",
    email: "3@example.com"
  },
  {
    name: "jane dope",
    email: "4@example.com"
  }]
</script>

В конце дня я просто ищу толчок в правильном направлении.

1 Ответ

0 голосов
/ 09 февраля 2020

Я все еще не совсем уверен, чего вы пытаетесь достичь, но, основываясь на вашем комментарии, я думаю, что это где-то близко: 

new Vue({
  el: '#app',
  
  data () {
    return {
      selected: null,
    
      xfer: [
        {
          name: "john doe",
          email: "1@example.com"
        }, 
        {
          name: "john dope",
          email: "2@example.com"
        },
        {
          name: "jane doe",
          email: "3@example.com"
        },
        {
          name: "jane dope",
          email: "4@example.com"
        }
      ]    
    }
  },
  
  methods: {
    onClick (item) {
      this.selected = item
    }
  }
})
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <div>
    <button
      v-for="item in xfer"
      :key="item.email"
      @click="onClick(item)"
    >
      {{ item.name }}
    </button>
  </div>
  <p v-if="selected">
    You need to email {{ selected.name }} for further assistance.
    <strong>{{ selected.email }}</strong>
  </p>
</div>

Если вы хотите написать то же самое, что и файл .vue, вы избавитесь от частей new Vue и el и просто используете export default вместо.

Ключевым моментом, на который следует обратить внимание, является то, что при доступе к идентификаторам, таким как xfer и selected в шаблоне, они являются просто свойствами экземпляра Vue. В шаблоне вы должны удалить префикс this., но он по-прежнему необходим в пределах части JavaScript (например, см. Внутри onClick).

В типичном приложении вы создадите только один экземпляр Vue напрямую используя new Vue, но у каждого дочернего компонента будет свой собственный экземпляр Vue, созданный за сценой. Свойства, созданные с помощью props, data, computed, et c. все будут доступны через этот связанный экземпляр.

Когда нажата кнопка, я решил сохранить соответствующую запись из xfer в selected. Это не единственный способ сделать это. Например, вы можете хранить идентификатор или индекс. В этом случае у вас может быть свойство computed, которое находит соответствующий объект, чтобы предоставить его шаблону.

...