如何从vue.js的pug模板中引用数据？

Question

基本上，我正在尝试从事件名称中创建永久链接。当我使用v-model从事件名称中获取值时，它有效，但是我如何将转换后的永久链接放回pug中的另一个输入框中？

这个可以工作： ```P {{message}},textarea(rows="2") {{message}}```

但是，当我尝试以下内容时： ``` input(value="{{message}}"),input(value={{message}}),input(value=#{{message}}),input(value=@{{message}}),input(value=#{message}) ``` Pug没有渲染它，并显示了缩进错误。我的问题是如何在输入值中绑定或引用Vue中的数据？

Pug模板：

.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 代码：

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();
  })

- Manoj jain

Answer 1

您可以使用v-bind指令。使用此指令，您可以将任何HTML元素的属性绑定到一个值上，无论该值是计算过的还是对props或data的引用。

在您的情况下，代码应该像这样:

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

查看官方文档以获取更多信息：

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

- Andrés Biarge