Vue data parent reference inside data field

I am trying to do something very simple with Vue, but I have tried many options and none seem to work. So I have the classic data object:

dataVar: {
            id: "1",
            moreData{
                phoneNum: "1231231239",
                stuff: "two"
            }
            header: "Insert",
            instructions: [
                {
                    title:"title1".
                    content: "Call the number" + Vue.moreData.phoneNum + "and then contiune the other instructions.
                }{
                    title:"title1".
                    content: "Another instruction"
                }       
            ],
            NIP: 0

}

var Vue = new Vue({

    ...
    data: dataVar
})

Then in the html

<div v-for="instruction in instructions">

    <span>{{instruction.content}}</span>
</div>

Inside the instructions object, inside the content field, I have a string where I part of the string is going to be a variable, in this case, a phone number. If I call Vue.moreData it gets undefined; if I call dataVar.moreData it also gets undefined. I have tried using v-html as:

<span v-html="instruction.content"> </span>

And then in content: "Call the number {{moreData.phoneNumber}} ...". But it just prints the string "...{{moreData.phoneNumber}}...".

What can I do to make it work?? I know JSON data is not reactive, but there has to be a way to make this work, it seems so simple and common. I am a beginner with Vue, so there is probably a more fundamental problem I am not seeing. Thanks in advance.

quickliketurtle

8 years ago

Best Answer

Level 16

Hello, I believe this has to do with you trying to access the dataVar object inside the dataVar object.

You can instead do something like this:

  dataVar = new function() {
    this.id = "1",
    this.moreData = {
      phoneNum: "1231231239",
      stuff: "two"
    },
    this.header = "Insert",
    this.instructions = [
      {
        title:"title1",
        content: "Call the number " + this.moreData.phoneNum + " and then continue the other instructions."
        },{
        title:"title1",
        content: "Another instruction"
      }
    ],
    this.NIP = 0
  };

Now with:

<div v-for="instruction in instructions">
    <span>{{instruction.content}}</span>
</div>

The output is:

Call the number 1231231239 and then continue the other instructions.
Another instruction

1 like

kevuno

8 years ago

Level 2

I have no clue you could have the data instance to be a function. That is really clever my friend! Thanks so much for your help, you have saved me from this hole. Are there any other things I might be missing from common practices in Vue. I, for example, have a list of panels that I will be showing as menus. And each panel has its own list of inputs and buttons. So I have a list of objects in the data instance that will represent all the panels. Finally, in the HTML, I have a

<div v-for="panel in panels">

Can use a different feature of Vue or a different practice?

Regardless, thanks for the help!

Please or to participate in this conversation.