Asked Jan 16th, 2019 3:49 AM 157 0 2
  • 157 0 2
+1

Vuejs: data lấy dữ liệu từ props (error)

Share
  • 157 0 2

Chào mọi người, em đang gặp vấn đề như thế này: ở component con, em có:

props: {
    id: {

    },
    title: {
      type: String
    },
    content: {
      type:String
    }
  }
  data () {
    return {
      c_title: this.title,
      c_content: this.content,
   }
 }

ở component cha, em có:

<post-form 
     :title="post.title"
     :content="post.content"
 />
 
data () {
    return {
      post: {
        title: '',
        content: ''
    }
}

và em vào Vue DevTool kiểm tra thì có props, nhưng data vẫn undefined, em đã thử thay:

<post-form 
     :title="post.title"
     :content="post.content"
 />

thành

<post-form 
     :title="'something'" //string
     :content="'something'" //string
 />

thì ở dưới component con lại có thể lấy được nhưng để là:

<post-form 
     :title="post.title"
     :content="post.content"
 />

thì component con lại không lấy dc. lỗi như hình ạ: Em không hiểu tại sao, mong mọi người giúp đỡ cách khắc phục, em xin cám ơn!!!!!!!!!

2 ANSWERS


Answered Jan 16th, 2019 4:06 AM
Accepted
+2

Dùng created() để gán giá trị của props vào data anh ạ.

Share
Jan 16th, 2019 4:12 AM

@tiennguyen98 =)) nó vẫn đếch nhận chú ạ

0
| Reply
Share
Jan 16th, 2019 5:14 AM

@hai2 :v RIP thêm <post-form v-if="post.title". Ko được nữa thì nghỉ =))

0
| Reply
Share
Jan 16th, 2019 5:17 AM

@tiennguyen98 dc chú ạ, tai sao thế nhỉ, ảo vãi

0
| Reply
Share
Jan 16th, 2019 5:52 AM

@hai2 Vì anh đang lấy dữ liệu từ API về. Lúc này tì component sẽ được render ra tuy nhiên dữ liệu vẫn chưa được lấy về kịp (bất đồng bộ).

0
| Reply
Share
Jan 16th, 2019 6:44 AM

@tiennguyen98 uh thank you chu

+1
| Reply
Share
Answered Jan 16th, 2019 3:57 AM
+1
data () {
    return {
      post: {
        title: '',
        content: ''
    }
}

thiếu 1 dấu } nhé chỗ khai báo Object post nhé bạn

data () {
    return {
      post: {
        title: '',
        content: ''
       }
    }
}
Share
Jan 16th, 2019 3:59 AM

@hoangken mình copy nên bị thiếu, chứ trong code mình đủ nhưng nó bi lỗi như trênw.😭😭😭😭

0
| Reply
Share
Jan 16th, 2019 3:59 AM

@hai2 Check xem cách của @hoangken được không

0
| Reply
Share
Jan 16th, 2019 4:01 AM

@quankm1097 đó là lỗi cú pháp thôi, trong code mình đủ rồi, ở component con có props rồi mà data() { c_title: this.title }

không thể lấy dc. c_title undefined còn title vẫn có giá trị

0
| Reply
Share
Jan 16th, 2019 4:04 AM

Screenshot from 2019-01-16 11-03-24.png lỗi như hình trên ạ:

0
| Reply
Share
Jan 16th, 2019 4:05 AM

@hai2 giá trị titile và description ở component cha có thay đổi bởi một box input nào không thế .

0
| Reply
Share
Jan 16th, 2019 4:05 AM
Jan 16th, 2019 4:06 AM

@quankm1097 ở component chả chỉ lấy dữ liệu từ server về, rồi truyền props đến con thôi ạ

0
| Reply
Share
Jan 16th, 2019 4:10 AM

@hai2 Cho mình hỏi là bạn lấy dữ liệu từ server trong component cha bạn để trong created() hay mouted() vậy.

0
| Reply
Share
Jan 16th, 2019 4:13 AM

@quankm1097 mình để trong created() ạ

0
| Reply
Share
Jan 16th, 2019 4:18 AM

@hai2 Bạn thử sử dụng cách này xem

async created() {
  const something = await goiApiSever();
 //Truyền dữ liệu từ api trả về vào các biến trong data
}
0
| Reply
Share
Jan 16th, 2019 4:22 AM

@quankm1097

ở created của mình:

created () {
    const STORE_KEY = '$_post'
    if (! (STORE_KEY in this.$store._modules.root._children)) {
      this.$store.registerModule(STORE_KEY, store)
    }
    this.getPostById()
  },
//methods
methods: {
    getPostById () {
      this.$store.dispatch('$_post/getPostById', this.id)
        .then(res => {
          this.post = res.data
        })
    }
  }
//action vuex
async getPostById (context, id) {
    const post = await axios.get('admin/posts/' + id)
    console.log(post)
    return post.data
  },
+1
| Reply
Share
Jan 16th, 2019 4:30 AM

@hai2 bạn thử sửa lại thế này xem được không

async created () {
    const STORE_KEY = '$_post'
    if (! (STORE_KEY in this.$store._modules.root._children)) {
      await this.$store.registerModule(STORE_KEY, store)
    }
    await this.getPostById()
  },
+1
| Reply
Share
Jan 16th, 2019 4:41 AM

@quankm1097 ở component con của mình đã có props rồi, nhưng cái data () ở component con không lấy được cái props đó ý ban,

0
| Reply
Share