代码之家 › 专栏 › 技术社区 › Alex

Vuejs 2无法插值属性值

es6-modules interpolation vue.js templates javascript

-4

Alex · 技术社区 · 7 年前

<th :class="{'c-' + column, active: sortKey == column}" v-for="column in getColumns()" @click="sortBy(column)"> {{ column }} </th>

但是语法应该是正确的。

我试了20种方法,但都失败了

即使我只 column

所以,这在es6模板语法中根本不起作用。 <script> index.html文件中的标记

export default{ template: ` <div :class="[c-${column}]"> .... <router-link :to="/list/${item.name}"> test </router-link> .... </div> `, created(){ } }

我试过了

${column} - undefined variable ${$column} - undefined variable `${column}` - unexpected identifier {{column}} - invalid expression in vue

以及其他组合,在es6模板语法中两者都不起作用。

所以vuejs模板不能与es6模块和模板语法一起使用?

4 回复 | 直到 7 年前

1

13

Ricky Ruiz 7 年前

对于HTML类绑定,可以使用两种语法:

Object syntax

<div :class="{ selected: isSelected }"></div>

类的存在将由所使用的数据属性的真实性决定。类绑定应为以下类型: { [key: string]: boolean } 或 Record<string, boolean> .

<div :class="{ [`${dynamicClassName}`]: true }"></div>

Array syntax

还有数组语法,它允许我们绑定类列表。

<div :class="['selected', 'some-other-class']"></div>

我们可以在数组语法中使用object语法,如下所示:

<div :class="['some-class', { selected: isSelected }]"></div>

<div :class="[`${dynamicClassName}`, { [`${dynamicClassName2}`]: isSelected }]"></div>

编辑:

template: `
    <div :class="'c-' + column">
       ....
       <router-link :to="'/list/' + item.name"> test </router-link>
       ....
    </div>
  `,

2

3

Nicholas Pipitone 7 年前

我不确定问题到底出在哪里,因为我看不到所有的代码(特别是JS),但我只想添加一个绝对有效的代码片段。下面的代码似乎是您想要的(或者至少是我认为您想要的):

function getColumns() {
 return ["a", "b" ,"c"];
}

function sortBy(column) {
 console.log("Do sorting stuff with " + column);
 app.sortKey = column;
}

app = new Vue({
 el: '#app',
 data() {
  return {
   getColumns,
   sortBy,
   sortKey: "a",
  }
 },
})

.c-a {
  color: red;
}
.c-b {
  color: green;
}
.c-c {
  color: blue;
}
.active {
  border: 1px solid black;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
 <table>
  <tr>
   <th v-for="column in getColumns()"  :class="{['c-' + column]: true, active: sortKey == column}"
      @click="sortBy(column)">
            {{ column }}
   </th>
  </tr>
 </table>
</div>

请注意,如果希望Vue对 columns (即,在列发生变化时进行检测),然后不要传入 getColumns . 只需传入列数组本身。然后使用 app.columns = ["x", "y", "z"] 设置一个新的列数组,Vue将检测到这一点。这就是它的用意。如果你知道,你可以强制更新 得到列数 将返回新的内容,但这不是正确的Vue用法。

去吧。只要你用 app.something = newsomething ,它将有效地重新呈现DOM,并为您提供非常好的语法。

PS:你可能不需要这个 sortBy 函数(我假设它只是对表中的行进行排序)。如果你的 索特比 仅用于表示逻辑,但没有抓住要点。所有的表示逻辑都可以完全在Vue中。您可以使用 computed methods :

function getColumns() {
 return ["First", "Middle" ,"Last"];
}

data = [
 {
  "First": "Bernhard",
  "Middle": "G.F.",
  "Last": "Riemann",
 },
 {
  "First": "Leonhard",
  "Middle": "",
  "Last": "Euler",
 }, 
 {
  "First": "Karl",
  "Middle": "F.",
  "Last": "Gauss",
 },
];

app = new Vue({
 el: '#app',
 methods: {
  headerClass(column) {
    return {
      ['c-' + column.toLowerCase()]: true,
      active: this.sortKey == column
    };
   }
 },
 computed: {
  sortedData() {
   sortingBy = (x, y) => x[this.sortKey] > y[this.sortKey];
   return data.sort(sortingBy);
  },
 },
 data: {
  columns: getColumns(),
  sortKey: "First",
  data,
 },
})

.c-first {
  color: red;
}
.c-middle {
  color: green;
}
.c-last {
  color: blue;
}
.active {
  border: 1px solid black;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
 <table>
  <tr>
   <th v-for="column in columns" :class="headerClass(column)"
      @click="sortKey = column">
            {{ column }}
   </th>
  </tr>
  <tr v-for="row in sortedData">
   <td v-for="column in columns">
    {{ row[column] }}
   </td>
  </tr>
 </table>
</div>

然后,您可以将所有的控制器逻辑与表示(比如排序表)完全分离。而且,您不必使用 索特比 (使用在HTML中,这意味着它必须在全局名称空间中,这对于一个大项目来说是行不通的)。我希望上面的代码展示了如何使用VueJS实现MVC的完全分离。

另外一个好处是,不必使用默认值对数组进行预排序 sortKey . 正如您可能已经注意到的,在我的原始代码中,没有初始的“DoSortingStuff with a”。这个 computed 版本自动处理初始案例。当然,这可以通过打电话来完成 sortBy("a") defaultKey 变量。第二种选择更好。

这个答案比我想的要明显得多,但“vuejs只是浪费时间吗?”在我看来是错误的,我想解释一下原因会很有用。这并不意味着像React这样的框架就不是更好的,但是VueJS绝对是表示逻辑的有效选择。

3

2

Nicholas Pipitone 7 年前

当它进入 obj['c-' + column] ,它没有定义-这是虚假的。你希望它是真实的,所以给它一个像 { 'c-' + column: true, active: sortKey == column }

sortKey != column ,导致 active 不出现在类列表中。

4

1

Pang Ajmal PraveeN 7 年前

export default {
  name: 'HelloWorld',
  data() {
    return {
      template: ``,
      column: "hare",
      item: {name: "krishna"},
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created() {
    this.template = `
      <div :class="[c-${this.column}]">
        ....
        <router-link :to="/list/${this.item.name}"> test </router-link>
        ....
      </div>
    `;
  }
}