如何从 vue,js pug 模板中引用数据？答案

【问题标题】：How to reference data from vue,js pug template?如何从 vue,js pug 模板中引用数据？
【发布时间】：2018-07-02 04:27:48
【问题描述】：

基本上，我正在尝试从事件名称中创建一个永久链接。当我使用 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 的数据？

帕格模板：

.col-md-12(style="padding:0px;")
    .col-md-2.labelcont
        label.labeltext Event Name&nbsp;: 
    .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&nbsp;: 
    .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();
  })

【问题讨论】：

标签： node.js express vue.js pug

【解决方案1】：

您可以使用v-bind 指令。这样，您可以将任何 HTML 元素的属性绑定到一个值，无论它是计算的还是对您的道具或数据的引用。

在你的情况下，它会是这样的：

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

查看官方文档以进一步阅读：

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

【讨论】：