Question

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

我尝试将数据放入一个简单的div中，因此可以将其选择到Vue实例中，但是它不起作用。一定有更好的方法。为了填充Vue实例，是否需要单独打回服务器？

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

最终想退出此视图模型

@model MyApp.CatalogViewModels.ViewModel

脚本在这里...

const result = array.reduce((carry, item) => {
    if (!carry.includes(item.country)) {
        carry.push(item.country);
    }
    return carry;
}, []).map(country => {
    return {
        country: country,
        series: array.filter(item => item.country === country).map(item => {
            return {
                name: item.name,
                value: item.value
            };
        })
    };

标记...

    new Vue({

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

        },
        created() {

            this.loadCategories()
        }
    })

Answer 1

首先要解决这个问题：

“最佳实践”方法是从后端服务器/ API检索客户端数据，而不是通过模板引擎将数据添加到属性。这样做实际上是在破坏Vue的目的。

为什么停止将数据添加到items属性中？为什么不通过Razor将其添加到列表中呢？ -这就是为什么将模板引擎与Vue一起使用并没有什么意义。

此外，将jQuery与Vue一起使用是多余的，并且不是必需的。如果设计正确配置，Vue可以代替jQuery。有时，根据您正在执行的操作或所使用的框架，是否使用Webpack等，它们可能不能很好地配合使用。尽管在大多数情况下，它应该没问题（但再次，完全可以不必要）。

话虽如此：

您可以执行以下操作以从items属性中获取数据。.我在回答中提供了2个示例，其中一个比另一个更容易...请记住，这些数据在当您尝试从DOM中获取文字字符串格式时。

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

[CodePen Mirror]

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>

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

1 个答案: