asp.net-mvc - Vue.Js - 如何从 MVC 视图模型将数据加载到 Vue 实例中？

Question

我是 Vue Js 的新手，想用它来过滤一些下拉列表等。考虑到我已经拥有视图模型中下拉列表的所有数据，我想将该数据传递给 Vue 实例，其中然后我可以使用 Vue 过滤下拉列表。

我已经尝试将数据放入一个简单的 div 中，因此我可以将其选择到 Vue 实例中，但它不起作用。一定有更好的方法。我是否必须单独调用服务器才能填充 Vue 实例？

代码片段只有一个简单的数组，我似乎也无法加载。

最终想退出这个视图模型

@model MyApp.CatalogViewModels.ViewModel

脚本在这里...

    new Vue({

        el: "#app",
        data: {
             categories: ["one", "two"]
        }
        ,
        methods: {
            loadCategories() {
                $('#modelData.items').forEach(item => this.categories.push(item))
            }              

        },
        created() {

            this.loadCategories()
        }
    })

标记...

<div id="app">


<div id="modelData" items=['apple','orange','pear']></div>

<div>

   <div>
<ul>
    <li v-for="item in categories">
        {{ item }}
    </li>
</ul>
</div>

标签： asp.net-mvcvue.jsvuejs2

Answer 1

只是要先解决这个问题：

这样做的“最佳实践”方式是从后端服务器/API 检索客户端的数据，而不是通过模板引擎将数据添加到属性中。Vue通过这样做，您基本上违背了目的。

为什么要停止将该数据添加到items属性？为什么不通过 Razor 将其添加到列表中？- 这就是为什么使用模板引擎Vue并没有真正意义..

此外，使用jQuerywithVue是多余且不需要的。如果您的设计配置正确，则Vue可以替换。jQuery有时它们不能很好地结合在一起，这取决于你在做什么或你正在使用的框架，你是否使用 Webpack 等等。虽然，大多数时候它应该没问题（但同样，完全不必要）。

说了这么多：

您可以执行类似的操作来从该items属性中获取数据。我在回答中提供了 2 个示例，其中一个比另一个更容易...请记住，当您尝试抓取时，此数据采用文字字符串格式它来自 DOM。

编辑：更改了一堆replace使用regex以清理它

[CodePen 镜子]

new Vue({
  el: "#app",
  data: {
    categories: ["one", "two"],
    categories2: ["three", "four"]
  },
  methods: {
    loadCategories() {
      //$('#modelData.items').forEach(item => this.categories.push(item))
      document
        .getElementById("modelData")
        .getAttribute("items")
        .replace(/[\[\]']+/g, "")
        .split(",")
        .forEach(x => {
          this.categories.push(x);
        });
    },
    loadCategories2() {
      document
        .getElementById("modelData2")
        .getAttribute("items")
        .split(",")
        .forEach(y => {
          this.categories2.push(y);
        });
    }
  },
  created() {
    this.loadCategories();
    this.loadCategories2();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app">

  <div id="modelData" items=['apple','orange','pear']></div>
  <ul>
    <li v-for="item in categories">
      {{ item }}
    </li>
  </ul>
  
  <br/>
  <hr/>
  <br/>
  
  <small>Easier this way</small>
  <div id="modelData2" items="apple, orange, pear"></div>
  <ul>
    <li v-for="item in categories2">
      {{ item }}
    </li>
  </ul>
  
</div>