Vue.Js - Как загрузить данные в экземпляр Vue из модели представления MVC?

Question

Я новичок в Vue J и хотел бы использовать его для фильтрации нескольких раскрывающихся списков и т. Д. Учитывая, что у меня уже есть все данные для раскрывающихся списков в модели представления, я бы хотел передать эти данные вЭкземпляр 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>

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>