Использование $ set для захвата переменной jquery и передачи ее в объект массива vue - PullRequest
Новая
       22

Использование $ set для захвата переменной jquery и передачи ее в объект массива vue

0 голосов
/ 09 мая 2019

Я извлекаю данные из API и использую метод jJuery getJson для извлечения данных. Затем я пытаюсь присвоить данные объекту массива vue с помощью приложения. $ Set.

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

<div id="app">

    <div v-once id="movies">
        {{movieCall()}}
    </div>

    <div v-for="(movie,index) of movies" class="card" style="width: 18rem;">
        <!-- <img src="..." class="card-img-top" alt="..."> -->
        <div class="card-body">
            <div class="card-title">{{movie}}</div>
        </div>
    </div>
</div> 



var app = new Vue({
    el: "#app",
    movies: [

        ],
    },
    methods:
    $.getJSON("https://api.themoviedb.org/3/movie/now_playing?api_key=9d9f46b8451885697e5cf7d1927da80f", function (movie) {
        for (let i = 0; i < 3; i++) {

            app.$set(app.movies, i, movie.results[i].title);

        }

        for (var x = 0; x < app.movies.length; x++) {
            console.log(app.movies[x])

        }
    })

   },

Я извлекаю фильм и устанавливаю заголовок для массива фильма, но я хочу назначить его вместо объекта фильма {заголовок}. Это так, когда я прохожу цикл v-for, я могу ссылаться на массив объекта movie как movie.title, movie.overview и т. Д., Чтобы распечатать их все. например Другими словами, есть ли способ сделать: 

app.$set(app.movies.title, i, movie.results[i].title);
app.$set(app.movies.overview, i, movie.results[i].description);
etc.

и мой массив фильмов настроен как: 

movie[
      {title:}
      {description:}
]

и, наконец, цикл как: 

 <div v-for(movie, index) of movies>
 <div class="titles">
 {{movie.title}}
 </div>
 <div class="descriptions">
 {{movie.description}}
 </div>
 </div>

Ответы [ 3 ]

0 голосов
/ 09 мая 2019

Если вы хотите получить доступ к movies, например: 

<div v-for="(movie, index) of movies">
   ...
   {{movie.title}}
   ...
   {{movie.description}}

Затем заполните его как: 

app.$set(app.movies, i, {title: movie.results[i].title, description: movie.results[i].description});

Или, если i увеличивается по одному, эквивалентно: 

app.movies.push({title: movie.results[i].title, overview: movie.results[i].description});
0 голосов
/ 09 мая 2019

Ваш код нуждается в небольшом обновлении / исправлении, прежде чем он будет в порядке, поэтому я подготовил фрагмент для вас, который делает то же самое (с ответом JSON макета), чтобы вы могли видеть, что вам не нужно app или $ set для этого. 

var app = new Vue({
  el: "#app",
  data: {
    movies: []
  },
  methods: {
    movieCall() {
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(json => {
          json.forEach(movie => this.movies.push(movie))
          // or just simply:
          // this.movies = json
        })
    }
  },
  created() {
    this.movieCall()
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(movie,index) in movies">
    <div>
      <div>{{index + ". Title: " + movie.title}}</div>
      <div>{{index + ". Body: " + movie.body}}</div>
    </div>
  </div>
</div>

Я пытался сделать это как можно ближе к вашему коду (но CSS-классы были удалены).

В основном Vue является реактивным ( data свойство), поэтому при обновлении свойства данных movies шаблон должен немедленно реагировать на это и обновлять пользовательский интерфейс. Это основная идея инфраструктуры JS.

Другой вопрос - доступ к данным в синтаксисе объекта (например, movies.title , с точкой). В вашем проекте вы установили свойство данных - movies , это массив . Массив может содержать элементы любого типа - объекты тоже.

Идея состоит в том, что вы загружаете объекты, а затем считываете их (по одному) в свойство данных фильмов . Или, если вы получаете массив, тогда this.movies = response (сделайте их равными, присваивая ответ массиву movies.

Тогда есть еще одна вещь: Шаблоны Vue имеют свой жизненный цикл, а create () - это ловушка, которую можно использовать для выполнения функций при создании шаблона. Если вы хотите что-то запустить один раз, вы должны использовать эти ловушки жизненного цикла. (Конечно, если ваше приложение перезагружает этот шаблон, то оно выполняет ловушку много раз. Чтобы избежать этого (загрузка чего-либо несколько раз), вам следует обратиться к управлению состоянием, но это большая тема сама по себе.)

0 голосов
/ 09 мая 2019

Добавить ключ данных для хранения набора данных 

 <script>
       var app = new Vue({
            el: "#app",
            data: {
                movies: [],
            },
        methods:
          $.getJSON("https://api.themoviedb.org/3/movie/now_playing?api_key=9d9f46b8451885697e5cf7d1927da80f", function (movies) {
              for (var x = 0; x < movies.results.length; x++) {
                //console.log("\nTitle"+movies.results[x].title);
                //app.movies.$set(x, movie.results[x].title);
                app.movies.push(movies.results[x].title);
                console.log(JSON.stringify(app.movies)) 
            }
          })
        }); 
    </script>

И попробуйте с этой командой 

app.movies.push(movie.results[i].title);

Вот рабочий пример или образец, который я создал: https://plnkr.co/edit/EnepqQqXzEquJlxqjzn6?p=preview

Ref1: https://vuejs.org/v2/guide/list.html

...