Vuejs 2无法插入属性值

Question

 <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模块和模板语法一起使用？

Answer 1

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

对象语法

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

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

使用模板字符串(反引号)作为对象属性名称时,需要将其包装在方括号中.

即:

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

数组语法

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

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

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

<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>
  `,

Answer 2

I'm not sure exactly where the problem is because I can't see all of the code (Notably, the JS), but I'm just going to add a snippet that definitely works. The following code appears to do what you want (Or at least, what I think you want):

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>

Note that if you want Vue to be reactive with columns (I.e., sense when the columns change), then don't pass in getColumns. Just pass in the columns array itself. Then use app.columns = ["x", "y", "z"] to set a new array of columns, and Vue will sense this. That's the way it's meant to be used. You can force update if you know getColumns is going to return something new, but this isn't proper Vue usage.

Vue is a well-built framework, so don't think there's anything out there it simply can't do. As long as you update using app.something = newsomething, it'll rerender the DOM efficiently and give you that really nice syntax to do it with.

PS: You probably don't need that sortBy function (I'm assuming it just sorts the rows of the table). If your sortBy is used only for presentation logic, it's missing the point. All of the presentation logic can be entirely within the Vue. You can see this in action using computed and 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>

Then, you can have all of the controller logic completely separated from presentation things like sorting the table. And, you don't have pollute any namespaces with sortBy (Using sortBy in the HTML means it has to be in the global namespace, which isn't going to work for a big project). I hope the above code shows how you can use VueJS to get full MVC separation.

作为一个额外的好处，您不必使用默认值对数组进行预排序sortKey。正如您可能已经注意到的，在我的原始代码中没有最初的“Do sorting stuff with a”。该computed版本自动处理初始情况。当然，这可以通过调用sortBy("a")并将“a”拉入defaultKey变量来完成。第二个选择仍然更好。

这个答案感觉比我想要的更有广告性，但是“vuejs 只是浪费时间吗？” 我认为这是错误的，我认为解释一下原因会很有用。这并不意味着像 React 这样的其他框架不是更好，但 VueJS 绝对是表示逻辑的有效选择。