Can you initially change the value <input :value="data" /> in a component?-CodePudding

Hello I'm technically new to vuejs and I was wondering if I can change a value of <input :value="{data: data}" /> so in my main page template

<titled-input 
  width="528" 
  height="49.6" 
  fontSize="16" 
  title="Event Title" 
  :data="title"
>
</titled-input>

and in my main page script

export default {
  components: { 
    PrimaryButton,
    TitledInput,
    InputTags,
  },
  data() {
    return {
      title: "Title",
    };
  }
};

and in my components.vue (not its real name) I added a

:value="{data: data}"

and also in the props I added

data: String,

I thought this might work because other props work fine especially when I add a width: Number in the props and

:style ="{ width: width   'px'}"

do this

When I tried the code above it will give me

what I am expecting inside the input field is the word "Title"

CodePudding user response：

so I found the answer. I just needed to make :value= "data" instead of :value="{data:data}"

CodePudding user response：

in your components.vue, you need to replace :value="{data: data}" with

:value=data