Vue + Asp.Net MVC - 在 cshtml 属性中使用 vue mustache答案

【问题标题】：Vue + Asp.Net MVC - Using vue mustache in cshtml attributesVue + Asp.Net MVC - 在 cshtml 属性中使用 vue mustache
【发布时间】：2020-01-02 14:10:56
【问题描述】：

从 Vue 的文档中我们知道，我们可以使用 vue mustaches 来访问 html 元素属性中的属性

但由于某种原因，我无法在 .net 的 .cshtmlpages 中完成这项工作

这里有一个简单的例子（对于 ui 我使用 Element-UI 库）：


<el-table :data="tableData"
      row-key="Id">
    <el-table-column prop="Price"
                     label="Standard">
        <template slot-scope="props">
            <span v-if="edit == false">{{ props.row.Price }}</span> @*this is working*@
            <div v-if="edit == true">
                <input id="price-{{ props.row.Id }}" type="text" v-model="props.row.Price">@*v-model works but id not*@
            </div>
        </template>
    </el-table-column>
</el-table>

源代码中的输出表明输入元素的 ID 是 price-{{ props.row.Id }}，但例如应该是 price-1

你对我有什么建议吗？

【问题讨论】：

如果你暂时禁用了 Vue，我很想看看你的标记是什么样子的。 Razor 模板引擎是否剥离了 Vue 需要的语法？
我在问题的代码中添加了 cmets

标签： javascript html asp.net asp.net-mvc vue.js

【解决方案1】：

我认为您正在尝试将 row.id 绑定到文本框 id 属性。你应该像下面那样做。

<input v-bind:id="props.row.Id" customeAttr="price" type="text" v-model="props.row.Price">

或者您可以将模型数据更改为拥有一个 get 属性，该属性可以返回自定义字符串，如“价格-”+ id。

{
  id: 1,
  price: 10,
  get customId() {        
    return 'price-' + this.id;
  }      
}

Detailed Example

【讨论】：

它正在工作，但如果我有很多这样的属性怎么办？然后我需要创建很多方法
为什么需要这样的自定义Id，为什么不直接使用id呢？如果您可以详细说明，我可能会想到其他解决方案。例如如果您想查看字段“价格”的此输入控件，您可以再添加一个属性。例如我做了 customAttr="price"。