반응형
vuex에 저장된 json 데이터 추가 및 읽기
나는 vuex 스토어를 가지고 있고 몇 가지 josn 데이터를 추가하고 있는데 이것이 그 형식이다.
[
{
"id":1,
"firstname": "toto",
"lastname": "titi"
},
{ "id":2,
"firstname": "one",
"lastname": "two"
}
]
클릭 시 동작의 데이터를 추가하고 있으며 이것이 동작 방법입니다.
addLink: function() {
var dt = '[{"id":1,"firstname":"xx","lastname": "yy"},{"id":2,"firstname": "one","lastname": "two"}]';
this.ADD_LINK(dt)
this.newLink = '';
},
데이터가 스토어에 추가되고 있으며 이렇게 액세스할 수 있습니다.
computed: {
users(){
return this.countLinks;
}
}
으로 데이터를 할 수 .{{users}}
그리고 이건 전시되고 있어요.조손하다
[ "[{\"id\":1,\"firstname\":\"xx\",\"lastname\": \"yy\"},{\"id\":2,\"firstname\": \"one\",\"lastname\": \"two\"}]", "[{\"id\":1,\"firstname\":\"xx\",\"lastname\": \"yy\"},{\"id\":2,\"firstname\": \"one\",\"lastname\": \"two\"}]" ]
그러나 v-for를 사용하려고 하면
<ul id="users">
<li v-for="user in users" :key="user.id">
{{ users.firstname}}
</li>
</ul>
어떤 데이터도 표시할 수 없고 오류도 없습니다.vuex에 저장된 데이터를 표시하려면 어떻게 해야 합니까?
만들 수 요.computed
의 됩니다.JSON
:
new Vue({
el:"#app",
data: () => ({
users: [ "[{\"id\":1,\"firstname\":\"xx\",\"lastname\": \"yy\"},{\"id\":2,\"firstname\": \"one\",\"lastname\": \"two\"}]", "[{\"id\":1,\"firstname\":\"xx\",\"lastname\": \"yy\"},{\"id\":2,\"firstname\": \"one\",\"lastname\": \"two\"}]" ]
}),
computed: {
usersList: function() {
return this.users.flatMap(userList => JSON.parse(userList));
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul id="users">
<li v-for="(user, index) in usersList" :key="index">
{{ user.firstname}}
</li>
</ul>
</div>
주의: 이 예에서는 ID가 고유하지 않기 때문에,
index
v-for
처key
이름을 하려면 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , .user
★★★★★★ 。
다른 솔루션: 해석dt
요소를 개체로 초기 목록에 추가하는 데 사용합니다.
let countLinks = [
{ "id":1, "firstname": "toto", "lastname": "titi" },
{ "id":2, "firstname": "one", "lastname": "two" }
];
function ADD_LINK(dt) {
countLinks = countLinks.concat(JSON.parse(dt));
}
const dt = '[{"id":1,"firstname":"xx","lastname": "yy"},{"id":2,"firstname": "one","lastname": "two"}]';
ADD_LINK(dt);
console.log(countLinks);
데이터를 문자열로 변환하지 않고 그대로 저장해야 합니다.
addLink: function() {
var dt = [
{
"id":1,
"firstname": "xx",
"lastname": "yy"
},
{
"id":2,
"firstname": "one",
"lastname": "two"
}
];
// remove the single quote from the above array
this.ADD_LINK(dt)
this.newLink = '';
},
만약 당신이 그 정보를 얻을 수 있다면var dt
외부 소스에서 다음 명령을 사용하여 유효한 js json 형식으로 변환하는 것을 고려해야 합니다.
addLink: function() {
var dt = '[{"id":1,"firstname":"xx","lastname": "yy"},{"id":2,"firstname": "one","lastname": "two"}]';
// parse it to json format
var parsedDt = JSON.parse(dt);
// add the `parsedDt`
this.ADD_LINK(parsedDt)
this.newLink = '';
},
언급URL : https://stackoverflow.com/questions/66951317/adding-and-reading-json-data-stored-in-vuex
반응형
'programing' 카테고리의 다른 글
Vue 2 - 클릭 이벤트 또는 입력 이벤트에서 실행되었을 때 $emit에서 다른 동작 (0) | 2022.08.17 |
---|---|
vuex 로그에서 다음 상태와 이전 상태를 숨기는 방법 (0) | 2022.08.17 |
캐시가 없는 VueJs 계산 속성 (0) | 2022.08.17 |
ES/TS 혼합 프로젝트에서 Vue 구성 요소 사용 (0) | 2022.08.17 |
VueX 스토어 필드의 값을 사용하여 컴포넌트를 초기화하려면 어떻게 해야 합니까? (0) | 2022.08.17 |