vuex에 저장된 json 데이터 추가 및 읽기

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가 고유하지 않기 때문에,indexv-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