Question

我真的在努力解决以下问题：

一些索引页面：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <div id="app">

      <ul>
        <li>some existing option</li>
        <example-component :foo="foo" :bar="bar"/>
      </ul>

      <a @click.prevent="showDetail(1, 'abc')" href="#" >Click ME!</a>

    </div>


    <script src="app.js"></script>


  </body>
</html>

一些单个文件组件：

<template>
    <li><a v-show="checkBool" data-toggle="tab" class="some-class" href="#container-div" data-tab-url="{{ this.foo }}">{{ this.bar }}</a></li>
</template>



<script>
export default {

  props: ['foo', 'bar'],


  computed: {
    checkBool: function() {
      return (this.foo != undefined && this.bar != undefined )
    }

  }

}
</script>

而app.js看起来像这样：

import Vue from 'vue'

Vue.component('example-component', require('ExampleComponent.vue'));

const app = new Vue({
    el: '#app',

    props: [
      'foo',
      'bar'
    ],

    data: {
      foo: '',
      bar: ''
    },

     methods: {
      showDetail: function (foo, bar) {
        this.foo = foo,
        this.bar = bar
      }
  }
});

我正在laravel安装下使用带有webpack的babel。

场景是这样的：

当我点击Click ME!链接时，foo和bar会更新并传递给组件（此部分正常运行）
此示例的名为checkBool的计算属性变为true，因此我将看到新的列表项（此部分正常工作）
新列表项，有一个链接，文本正确设置为bar（此部分也正常工作）

此时我知道组件和父级之间的值设置和通信工作正常，但data-tab-url="{{ this.foo }}"部分让我发疯。

我没有按预期解析胡须语法并返回data-tab-url="1"，而是获得引号之间所有内容的解析/转义值。

类似于data-tab-url="%7B%7B+this.foo+%7D%7D"。

现在，如何防止编码发生？根据我的阅读，vuejs 1.*曾经有过一种方式。使用三个括号：{{{ this.foo }}}但现在不推荐使用v-html，我不能将其用于我的示例。

Answer 1

绑定属性，如:data-tab-url="foo"。

这将为受影响的元素提供data-tab-url属性，其值等于组件的foo属性。

Answer 2

感谢的答案是正确的，但是;

进一步了解：

您不能将胡须语法用于属性绑定。仅将胡子{{}}用作dom元素的内容，即。

<div class="container">
  
  <div class="collapsible">
    <h3>One</h3>
    <div>This is item 1.</div>
  </div>
  
  <div class="collapsible">
    <h3>Two</h3>
    <div>This is item 2.</div>
  </div>
  
</div>

<p>
  The aim is to smoothly eliminate the column content, leaving only the header.
</p>

<p>
  Click a column header ("One" or "Two") to collapse the column; click again to expand.</p>

<p>
  What is causing the jump near the end of the collapse or expand transition?
</p>

要绑定任何属性，包括模板属性的任何其他属性，例如所讨论的“ src”或“ data-tab-url”，可以使用“ v-bind：attr”或“：attr”的简写形式，即

 <div>{{someValue}}</div> (THIS IS WRONG)

或

 <div v-bind:src="someDataVariable"></div>

您可以使用组件或Vue应用程序的任何成员（数据，方法，计算所得等），而无需使用“ this”。

Answer 3

要在 html 中呈现任何组件实例属性（道具、数据、计算...），您必须：

使用 list-complete 或简写 v-bind: 将其绑定到属性，例如 :
在 mustache 语法中使用它 :foo="someFoo"
将其用作指令值 {{someFoo}} 或 v-show="isShown"，指令总是以 v-model="username" 为前缀

对于事件，它们写成 v- 或 v-on:eventName，它们可以运行内联语句 @eventName 或方法 @click="count++"，知道 @click="increment" 是一个increment 选项中定义的函数

VueJS使用prop作为数据属性值

3 个答案: