Yêu cầu thg 3 31, 2019 10:16 SA 708 0 1
  • 708 0 1
+1

Cách đưa giá trị JSON vào trong các sub-object trong VUEJS

Chia sẻ
  • 708 0 1

Xin chào diễn đàn,

Mình có 1 vấn đề mà vọc mãi chưa ra nên đưa câu hỏi lên đây nhờ các bạn hỗ trợ, vấn đề như sau:

Mình dùng fetch() gọi 1 file JSON với API key từ 1 website về site của mình. Mình muốn sử dụng VUE để hiển thị 1 số thông tin trong JSON. Vì file JSON lớn nên mình tạo các data trong VUE như bên dưới. Mình cũng thử dùng v-for để gọi các đối tượng trong data của Vue nhưng ko thành công.

var dataSenate;
var app = new Vue({  
  el: '#app',  
  data: {
    nameData:{},   //các sub-object lấy từ JSON để hiển thị trong HTML
    partyData:{},    
    stateData:{},  
    seniorityData:{},
    pctvData:{},       
},
created(){
        fetch("url", {
        method: "GET",
        headers: {
        'X-API-Key':"key"
        }
        }).then(function(response) {

        if (response.ok) {    
        return response.json(); 
        }
        throw new Error(response.statusText);
        }).then(function(json) {
            dataSenate = json.results[0].members;
            vueTable();
        }).catch(function(error) {
        console.log("Request failed: " + error.message );
        });
    },
methods: {
        vueTable: function (){
            app.nameData = data.members.name; //gán giá trị từ JSON sub-object vào VUE có tên là nameData
            app.partyData = data.members.party;
            app.stateData = data.members.state;
            app.seniorityData = data.members.seniority;
            app.pctvData = data.members.votes_with_party;
       }  
    }
 });

Câu hỏi của mình như sau:

    1. Cách gọi giá trị của JSON vào các sub-object (nameData...) của VUE khai báo trong data.
    1. Cách gọi trực tiếp file JSON (dataSenate) vào trong VUE, từ đó gọi ra HTML.

Rất mong sớm nhận được phản hồi của các bạn.

Trân trọng - BK

1 CÂU TRẢ LỜI


Đã trả lời thg 4 1, 2019 2:42 SA
+1

Mình không hiểu rõ ý bạn lắm. Nhưng bạn muốn gán và monitor object vào data trong vue thì bạn có thể dùng Vue.set( target, key, value ) để gán giá trị chi tiết hàm tại https://vuejs.org/v2/api/#Vue-set

Chia sẻ
Avatar Bruce Kieu @BruceKieu
thg 4 15, 2019 9:28 SA

Cám ơn bạn đã trả lời, mình đã giải quyết đc vde bằng dùng "this". Mặc dù cách quản lý của Vue mình vẫn chưa hiểu lắm, n mình sẽ tìm hiểu thêm chắc sẽ sáng ra thôi. Cheers

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí