Vue JS перечисляет элементы, атрибут v-repeat track-by не работает

Question

Vue JS перечисляет элементы, атрибут v-repeat track-by не работает

Недавно я начал работать над Vue JS. Однако я столкнулся с одной проблемой.
Пожалуйста, используйте код ниже: —

            <div id="demo">
<ul id="list_music">
<li v-repeat="musics" track-by="_uid">{{ name }}</li>
</ul>
</div>

var demo = new Vue({
el: '#demo',
data : {
musics : null
},
created: function () {
//this.fetchData();
setInterval(this.fetchData, 5000);
},
methods : {
fetchData: function(){
var self = this;
console.log('test');
$.ajax({
type: "POST",
dataType : "json",
url : "test.php",
data: {},
success: function (response){
//self.$data.musics = response;
self.$set("musics", response);
}
});
}
}
});

и код PHP внутри test.php, как показано ниже:

         <?php
$array = [
array("name" => "Test name 0", "_uid" => 0),
array("name" => "Test name 1", "_uid" => 1),
array("name" => "Test name 2", "_uid" => 2),
array("name" => "Test name 3", "_uid" => 3),
array("name" => "Test name 4", "_uid" => 4),
array("name" => "Test name 5", "_uid" => 5),
];
echo json_encode($array);
?>

Согласно приведенному выше коду, я пытаюсь добиться того, чтобы код выполнял ajax-запрос каждые 5 секунд и динамически вставлял новый элемент li в тег ul. И если изменяются какие-либо старые значения, он также должен инициировать изменение в Посмотреть.

Я видел руководство Vue JS http://vuejs.org/guide/list.html#Using_track-by и использование параметра track-by., но я не могу заставить его работать. Когда я заменяю массив на этот
array("name" => "Test name Changed", "_uid" => 0);echo json_encode($array);

Вместо обновления значения 1-го индекса с «Имя теста 0» на «Имя теста изменено» происходит его замена на весь язык.

Кто-нибудь может сказать мне, что я здесь не так делаю?

Спасибо,
Ронак Шах

0

jquery php vue.js

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Получил решение!

Вот рабочий код: —

var demo = new Vue({
el: '#demo',
data : {
musics : null,
uid : [

]
},
created: function () {
//this.fetchData();
setInterval(this.fetchData, 5000);
},
methods : {
fetchData: function(){
var self = this;
console.log('test');
$.ajax({
type: "POST",
dataType : "json",
url : "test.php",
data: {},
success: function (response){
//self.$data.musics = response;
if(self.$data.musics != null){
$.each(response, function (k,v){
if(jQuery.inArray(v._uid, self.$data.uid) !== -1){
var key = getKey(v._uid, self.$data.musics);
self.$data.musics.$set(key,v);
} else {
self.$data.musics.push(v);
self.$data.uid.push(v._uid);
}
});
console.log(self.$data.uid);
} else {
self.$set("musics", response);
$.each(response, function (k,v){
self.$data.uid.push(v._uid);
});
console.log(self.$data.uid);
}
}
});
}
}
});

function getKey(uid, musics){
var key;
$.each(musics, function (k,v){
if(v._uid == uid){
key = k;
return false;
}
});

return key;
}

Приведенный выше код добавит новый li или обновит значение измененного li.

Наслаждайтесь!
Ронак Шах

0