Vue.Js - How to load data into Vue instance from MVC view model?

Question

I'm new to Vue Js and would like to use it to filter a few dropdown lists, etc. Considering I already have all of the data for the dropdowns in a view model I'd like to pass that data to a Vue instance where I can then filter the dropdowns using Vue.

I've tried putting the data into a simple div, so I can select it into the Vue instance, but it doesn't work. There has to be a better way. Do I have to make a separate call back to the server just to populate the Vue instance?

The code snippet just has a simple array, which I can't seem to load, either.

Eventually want to pull out of this view model

@model MyApp.CatalogViewModels.ViewModel

script here...

    new Vue({

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

        },
        created() {

            this.loadCategories()
        }
    })

Mark up...

<div id="app">


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

<div>

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

Matt Oestreich · Accepted Answer · 2019-06-04 20:46:18Z

Just going to get this out of the way first:

The 'best practices' way of doing this would be to retrieve data on the client side from a backend server/API versus adding data to attributes through a templating engine. You're essentially defeating the purpose of Vue by doing this.

Why stop at adding that data to an items attribute? Why not just add it to the list via Razor? -- that is why using a templating engine with Vue doesn't really make sense..

Furthermore, using jQuery with Vue is redundant and not needed.. Vue can replace jQuery if you have your design configured correctly. Sometimes they do not play nice together, depending on what you're doing or the frameworks you're using, whether or not you're using Webpack, etc.. although, most of the time it should be ok (but again, completely unnecessary).

With all of that being said:

You could do something like this to grab data from that items attribute.. I have provided 2 examples in my answer, one of them is easier than the other... Keep in mind, this data is in literal string format when you attempt to grab it from the DOM.

Edit: changed a bunch of replace to use regex in order to clean it up

[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>

Collectives™ on Stack Overflow

Vue.Js - How to load data into Vue instance from MVC view model?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related