CODEWITHSUNDEEP
node.jsexpressvue.jspug
Manoj jain
Manoj jain

Reputation: 73

How to reference data from vue,js pug template?

Basically I am trying to make a permalink from an event name. When I get the value from the event name using v-model it works but how do I put the converted permalink back in another input box in pug?

This works:

"P {{message}}",textarea(rows="2") {{message}}

but when i try the following:

input(value="{{message}}"),input(value={{message}}),input(value=#{{message}}),input(value=@{{message}}),input(value=#{message})

Pug does not render it & shows an indent error. My question is how do I bind or reference data from Vue in input values ?

Pug template:

.col-md-12(style="padding:0px;")
    .col-md-2.labelcont
        label.labeltext Event Name : 
    .col-md-10
        input(
          type="text"
          class="form-control"
          placeholder="Event Name"
          v-model="eventname"
        )
.col-md-12(style="padding:0px;")
    .col-md-2.labelcont
        label.labeltext Permalink : 
    .col-md-10
        textarea(
          type="text"
          class="form-control"
          placeholder="Event Permalink"
        ) {{eventpermalink}}

Vue.js code:

var basicinfo = new Vue({

    el: '#basic',
    data: {
      eventname: '',
      eventpermalink: '',
    }
  })

  basicinfo.$watch('eventname', function (newValue, oldValue) {
    basicinfo.eventpermalink = basicinfo.eventname.replace(/[^a-zA-Z0-9 ]/g,'').replace(/ +/g,'-').toLowerCase();
  })

Upvotes: 4

Views: 7177

Answers (1)

Andres Biarge
Andres Biarge

Reputation: 389

You can use the v-bind directive. This way, you can bind any HTML element's attribute to a value whether it's calculated or a reference to your props or data.

In your case, it would be something like this:

input(type="text" class="form-control" placeholder="Event Name" 
     v-model="eventname" v-bind:value="YOUR-DATA-OR-WHATEVER")

Look the official documentation for further reading:

https://v2.vuejs.org/v2/guide/syntax.html

Upvotes: 4

Related Questions