Yêu cầu thg 1 16, 2019 3:49 SA 509 0 2
  • 509 0 2
+1

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

Chia sẻ
  • 509 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 CÂU TRẢ LỜI


Đã trả lời thg 1 16, 2019 4:06 SA
Đã được chấp nhận
+2

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

Chia sẻ
thg 1 16, 2019 4:12 SA

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

thg 1 16, 2019 5:14 SA

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

thg 1 16, 2019 5:17 SA

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

thg 1 16, 2019 5:52 SA

@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ộ).

thg 1 16, 2019 6:44 SA

@tiennguyen98 uh thank you chu

Đã trả lời thg 1 16, 2019 3:57 SA
+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: ''
       }
    }
}
Chia sẻ
thg 1 16, 2019 3:59 SA

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

thg 1 16, 2019 3:59 SA

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

thg 1 16, 2019 4:01 SA

@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ị

thg 1 16, 2019 4:04 SA

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

thg 1 16, 2019 4:05 SA

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

thg 1 16, 2019 4:05 SA
thg 1 16, 2019 4:06 SA

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

thg 1 16, 2019 4:10 SA

@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.

thg 1 16, 2019 4:13 SA

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

thg 1 16, 2019 4:18 SA

@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
}
thg 1 16, 2019 4:22 SA

@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
  },
thg 1 16, 2019 4:30 SA

@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()
  },
thg 1 16, 2019 4:41 SA

@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,

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í