Как читать данные из v-for (vue.js)? - PullRequest
Новая
       5

Как читать данные из v-for (vue.js)?

0 голосов
/ 08 сентября 2018

С учетом следующего v-for: 

  <div class="container-fluid" id="networdapp" style="display:none;">
     <div class="row" >
       <div v-for="result in results" class="col-sm-6" >
         <div class="card m-3 h-240  bg-light" >
         <div class="card-header text-center" > {{ result.title }} </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text" v-html="result.prevDesc"></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="/details" class="btn btn-info" @click="getData(result)" >Details</a>
             </div>
         </div>
      </div>
      </div>
     </div>

И следующий скрипт Vue.js: 

   <script type="text/javascript">
  const vm = new Vue({
   el: '#networdapp',
    data: {
     results:[]
    },

    methods: {

    getData: function(result){
    window.alert($(this).parents("#networdapp").find(".card-header.text-center").outerHTML);
    window.alert(document.getElementsByClassName("card-header").outerHTML);
    window.alert(result.outerHTML);
     }

    },

     mounted() {
   axios.get('/getJson')
     .then(response => {
    this.results = response.data;
    })
      .catch( e => {
   console.log(e);
     });
     }
   });

     </script>

Я хочу получить данные из определенной итерации, скажем, если я нажимаю кнопку "Детали" 3-го деления в v-for, я хочу получить данные {{result.title}} из 3-го для. Возможно ли это? Я читал документацию по Vue.js, но не нашел ничего о чтении данных из DOM. Если это невозможно, то как я могу это сделать без Vue.js? Есть ли другой вариант? ? Основная цель - получить эти данные и поместить их в объект js, передав их на другую веб-страницу.

Ответы [ 2 ]

0 голосов
/ 08 сентября 2018

Вы должны передать индексный ключ и использовать для получения от результатов позиции.

изменить div для цикла div на 

<div  v-for="(result,i) in results" :key="i" class="col-sm-6" >

также изменить параметр методов 

<a href="/details" class="btn btn-info" @click="getData(i)" >Details</a>

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

getData: function(key){
console.log(this.results[key].title)
 }

так Учитывая следующее v-for: 

 <div class="container-fluid" id="networdapp" style="display:none;">
     <div class="row" >
       <div  v-for="(result,i) in results" :key="i" class="col-sm-6" >
         <div class="card m-3 h-240  bg-light" >
         <div class="card-header text-center" > {{ result.title }} </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text" v-html="result.prevDesc"></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="/details" class="btn btn-info" @click="getData(i)" >Details</a>
             </div>
         </div>
      </div>
      </div>

И следующий скрипт Vue.js: 

<script type="text/javascript">
  const vm = new Vue({
   el: '#networdapp',
    data: {
     results:[]
    },

    methods: {

    getData: function(key){
    console.log(this.results[key].title)
     }

    },

     mounted() {
   axios.get('/getJson')
     .then(response => {
    this.results = response.data;
    })
      .catch( e => {
   console.log(e);
     });
     }
   });

0 голосов
/ 08 сентября 2018

Чтобы получить данные, к которым вы хотите получить доступ, в массиве результатов, вы можете использовать индекс в цикле v-for 

v-for="(result, index) in results"

, вы можете проверить документы здесь https://vuejs.org/v2/guide/list.html

Я также настоятельно рекомендую вам добавить ключевой атрибут после v-for, чтобы vue.js отслеживал каждый результат, см. https://vuejs.org/v2/guide/list.html#key

...