CODEWITHSUNDEEP
htmltemplatesvuejs2
Andrew Grothe
Andrew Grothe

Reputation: 2374

Vuejs 2.0 attribute not showing in page source

In Vue 1.0.28 I can do something like this:

Vue.component('singletext', {
      template: `<input type=text value="{{item.value}}" />`,
      props: {
          item: Object
      }
});

and get this when I view the page source:

<input type="text" value="a value">

But in Vue 2.0, I must use v-bind, which properly shows the value on the screen, but the page source is missing the attribute like this:

Vue.component('singletext', {
      template: `<input type=text :value="item.value" />`,
      props: {
          item: Object
      }
});

Page source:

<input type="text">

Is there anyway to ensure the page source is generated properly? (without SSR)

Upvotes: 1

Views: 554

Answers (1)

Bert
Bert

Reputation: 82479

Well, a render function works.

Vue.component("singletext", {
  props:{item: Object},
  render(h){
   return h('input', {attrs: {value: this.item.value, type: "text"}})
  }
})

I can't think of a better way to do it. If you need more template like features, you can add them.

Here is an example.

Upvotes: 1

Related Questions