EzDev.org

vue

vue - A progressive, incrementally-adoptable JavaScript framework for building UI on the web. Vue.js vue.js - intuitive, fast and composable mvvm for building interactive interfaces.


[Vue warn]: Cannot find element

I'm using Vuejs. This is my markup:

<body>
    <div id="main">
      <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
    </div>
  </body>

This is my code:

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
})
;

When I load the page I get this warning:

[Vue warn]: Cannot find element: #main

What am I doing wrong?


Source: (StackOverflow)

How to remove hashbang from url?

How to remove hashbang #! from url?

I found option to disable hashbang in vue router documentation ( http://vuejs.github.io/vue-router/en/options.html ) but this option removes #! and just put #

Is there any way to have clean url?

Example:

NOT: #!/home

BUT: /home


Source: (StackOverflow)

Can you force Vue.js to reload/re-render?

Just a quick question.

Can you force Vue.js to reload/recalculate everything? If so, how?


Source: (StackOverflow)

Moment.js with Vuejs

I try to print out date time using like the following in vue-for

{{ moment().format('MMMM Do YYYY, h:mm:ss a') }}

but, it does not appear. It's just a blank. How I can try to use moment in vue?


Source: (StackOverflow)

AngularJs vs VueJS What are the advantages and disadvantages

Good morning, In recent months I have worked AngularJS, but today I found a post and spoke of a library that is gaining strength and may reach to fight: AngularJS and ReactJs,it's library is VueJs people is recommending much and I would like to know the advantages or disadvantages how good or if someone work it and work and as it seemed.


Source: (StackOverflow)

vue.js - Organize big single page application with multiple views

I'm playing with new MVVM framework - Vue.js (http://vuejs.org/).

It was really nice in simple examples and demos but now I'm trying to create big SPA with multiple views and I'm realizing that the best pattern how to do it is not described in framework's docs.

The main problem is that I don't know how to handle views on different routes.

For example, I'm using Director (https://github.com/flatiron/director) for routing but how can I change views?

var booksCtrl = function () {
   var booksViewModel = new Vue({
       el: '#books'
       data: { ... }
       ready: function () {
          // hide previous ViewModel and display this one??
       }
   });
};

var editBookCtrl = function (id) { 
   var editBookViewModel = new Vue({
       el: '#editBook'
       data: { ... }
       ready: function () {
          // hide previous ViewModel and display this one??
       }
   });
};

var routes = {
    '/books': booksCtrl,
    '/books/:id/edit': editBookCtrl
};

var router = new Router(routes);
router.init();

Do I need to create separate Vue.js ViewModels and just display:block / display:none them like in this example?

What would be the right way in your opinion? Thanks!


Source: (StackOverflow)

Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser

I'm trying to use webpack-dev-server to compile files and start up a dev web server.

In my package.json I have the script property set to:

"scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

So the --hot and --inline should enable the webserver and the hot reloading (as I understand it).

In my webpack.config.js file I set the entry, output, and devServer settings as well as add a loader to look for changes in .vue files:

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

So with this setup, I run npm run dev. The webpack-dev-server starts up, the module loader test works (i.e. when I save any .vue file it causes webpack to recompile), but:

  • The browser never refreshes
  • The compiled javascript that gets stored in memory is never made available to the browser

On that second bullet, I can see this because in the browser window the vue placeholders are never replaced and if I open up the javascript console the Vue instance is never created or made available globally.

Gif of issue

What am I missing?


Source: (StackOverflow)

Passing data to components in vue.js

I'm struggling to understand how to pass data between components in vue.js. I have read through the docs several times and looked at many vue related questions and tutorials, but I'm still not getting it.

To wrap my head around this, I am hoping for help completing a pretty simple example

  1. display a list of users in one component (done)
  2. send the user data to a new component when a link is clicked (done) - see update at bottom.
  3. edit user data and send it back to original component (haven't gotten this far)

Here is a fiddle, which fails on step two: https://jsfiddle.net/retrogradeMT/d1a8hps0/

I understand that I need to use props to pass data to the new component, but I'm not sure how to functionally do it. How do I bind the data to the new component?

HTML:

    <div id="page-content">
       <router-view></router-view>
     </div>

 <template id="userBlock" >
   <ul>
     <li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a>
     </li>
   </ul>
 </template>

  <template id="newtemp" :name ="{{user.name}}">
    <form>
      <label>Name: </label><input v-model="name">
      <input type="submit" value="Submit">
    </form>
  </template>

js for main component:

Vue.component('app-page', {
  template: '#userBlock',

  data: function() {
    return{

        users: []
      }
    },

ready: function () {
    this.fetchUsers();
},

methods: {
    fetchUsers: function(){
        var users = [
          {
            id: 1,
            name: 'tom'
          },
          {
            id: 2,
            name: 'brian'
          },
          {
            id: 3,
            name: 'sam'
          },
        ];

        this.$set('users', users);
     }
    }
  })

JS for second component:

Vue.component('newtemp', {
  template: '#newtemp',
  props: 'name',
  data: function() {
    return {
        name: name,
        }
   },
})

UPDATE

Ok, I've got the second step figured out. Here is a new fiddle showing the progress: https://jsfiddle.net/retrogradeMT/9pffnmjp/

Because I'm using Vue-router, I don't use props to send the data to a new component. Instead, I need set params on the v-link and then use a transition hook to accept it.

V-link changes see named routes in vue-router docs:

<a v-link="{ name: 'new', params: { name: user.name }}"> Show new component</a>

Then on the component, add data to the route options see transition hooks:

Vue.component('newtemp', {
  template: '#newtemp',
  route: {
   data: function(transition) {
        transition.next({
            // saving the id which is passed in url
            name: transition.to.params.name
        });
     }
  },
 data: function() {
    return {
        name:name,
        }
   },
})

Source: (StackOverflow)

VueJs templating. How to load external templates

I'm new to VueJs, I've used AngularJs for some time and in angular we used to load templates such as,

template: '/sometemplate.html',
controller: 'someCtrl'

How can we do such a thing in Vue, instead of keeping large HTML templates inside javascript like this,

new Vue({
  el: '#replace',
  template: '<p>replaced</p>'
})

This is ok for small templates but for large templates is this practical?

Is there a way to load external template html or use html template inside a script tag like in vue js?

<script type="x-template" id="template>HTML template goes here</html>

Thanks


Source: (StackOverflow)

Using vue.js with semantic UI

I'm trying to use webpack + Semantic UI with Vue.js and I found this library https://vueui.github.io/

But there was problem compling:

ERROR in ./~/vue-ui/components/sidebar/sidebar.jade
Module parse failed: /Project/node_modules/vue-    
ui/components/sidebar/sidebar.jade Unexpected token (1:24)
You may need an appropriate loader to handle this file type.

So I installed jade(pug) but still no luck.

And there's comment in github for that lib:

WIP, do not use ( https://github.com/vueui/vue-ui )

I've managed to import semantic css in my templates like this:

@import './assets/libs/semantic/dist/semantic.min.css';

But problem here is that I can't use semantic.js functions like dimmer and other stuff.

The thing is that I already have some old codebase written with semantic and it would be good not to use any other css framework (bootstrap or materialize).

Is there any elegant way to include semantic UI in my vue.js project?


Source: (StackOverflow)

VueJs how to make pagination with limiter and range..?

I have code like this :

var demoList = new Vue({
  el: '#demoList',
  data: {
    items: [{
      "id": 1,
      "name": "Tom"
    }, {
      "id": 2,
      "name": "Kate"
    }, {
      "id": 3,
      "name": "Jack"
    }, {
      "id": 4,
      "name": "Jill"
    }, {
      "id": 5,
      "name": "aa"
    }, {
      "id": 6,
      "name": "bb"
    }, {
      "id": 7,
      "name": "cc"
    }, {
      "id": 8,
      "name": "dd"
    }, {
      "id": 1,
      "name": "Tom"
    }, {
      "id": 2,
      "name": "Kate"
    }, {
      "id": 3,
      "name": "Jack"
    }, {
      "id": 4,
      "name": "Jill"
    }, {
      "id": 5,
      "name": "aa"
    }, {
      "id": 6,
      "name": "bb"
    }, {
      "id": 7,
      "name": "cc"
    }, {
      "id": 8,
      "name": "dd"
    }, ],
    loading: false,
    order: 1,
    searchText: null,
    ccn: null,
    currentPage: 0,
    itemsPerPage: 2,
    resultCount: 0
  },
  computed: {
    totalPages: function() {
      console.log(Math.ceil(this.resultCount / this.itemsPerPage) + "totalPages");
      return Math.ceil(this.resultCount / this.itemsPerPage);

    }
  },
  methods: {
    setPage: function(pageNumber) {
      this.currentPage = pageNumber;
      console.log(pageNumber);
    }
  },
  filters: {
    paginate: function(list) {
      this.resultCount = this.items.length;
      console.log(this.resultCount + " Result count");
      console.log(this.currentPage + " current page");
      console.log(this.itemsPerPage + " items per page");
      console.log(this.totalPages + " Total pages 2");
      if (this.currentPage >= this.totalPages) {
        this.currentPage = Math.max(0, this.totalPages - 1);
      }
      var index = this.currentPage * this.itemsPerPage;
      console.log(index + " index");
      console.log(this.items.slice(index, index + this.itemsPerPage));
      return this.items.slice(index, index + this.itemsPerPage);
    }
  }
});
a {
  color: #999;
}
.current {
  color: red;
}
ul {
  padding: 0;
  list-style-type: none;
}
li {
  display: inline;
  margin: 5px 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="demoList">
  <div class="containerTable">
    <table class="table">
      <thead>
        <tr class="header">
          <th>
            <div><a @click="sortvia('provider_name')">Provider</a>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items | paginate">
          <td>{{item.name}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <ul>
    <li v-for="pageNumber in totalPages">
      <a rel='nofollow' href="#" @click="setPage(pageNumber)">{{ pageNumber+1 }}</a>
    </li>
  </ul>
</div>

Im stuck trying to create a pager with vuejs, so I was wonder if anyone can appoint an example of how to make a pager like this if is possible "1-2-3-4-5 ... 55" ??, thanks again for any help.


Source: (StackOverflow)

Laravel is not defined

Well i am playing with the new laravel 5.3 and vue.js and i want to do a GET call to some users i have in my DB

Im using components btw.

This is my app.js

require('./bootstrap');

Vue.component('example', require('./components/UserComponents/User.vue'));

const app = new Vue({

    el: 'body',

});

This is my component User.vue i left the HTML template out for post size reason i can post it if neccesary

<script>

    export default{

        data : function () {
            return {
                users : ''
            }
        },

        methods: {


            fetchUser: function () {

                var vm = this;

                vm.$http.get('user/', function (data) {
                   vm.$set('users', data)
                })

            }
        },
        ready() {

            this.fetchUser();
        },

    }
</script>

Im getting 2 errors in the console

 vue-resource.common.js?d39b:27 0ReferenceError: Laravel is not defined(…)

(program):29 Uncaught (in promise) ReferenceError: Laravel is not defined(…)

this is my package.json as you can see i have all the deps for this to work vue and vue resource

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "vue": "^1.0.26",
    "vue-resource": "^0.9.3"
  }
}

Hope someone could help me out here. Thank you


Source: (StackOverflow)

Vue display unescaped html

How can i manage to get html interpreted inside a mustache binding? At the moment the break (
) is just displayed/escaped.

Small vue app

 var logapp = new Vue({
          el: '#logapp',
          data: {
            title: 'Logs',
            logs: [
              { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1  },
              { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1  }
            ]
          }
        })

And here is the template

<div id="logapp">    
    <table>
        <tbody>
            <tr v-repeat="logs">
                <td>{{fail}}</td>
                <td>{{type}}</td>
                <td>{{description}}</td>
                <td>{{stamp}}</td>
                <td>{{id}}</td>
            </tr>
        </tbody>
    </table>
</div>

Source: (StackOverflow)

Vue Resource root options not used?

I specify a root options in my Vue-Resource in my main.js file, but when I do the request, it does not use the root options. What am I missing ?

Here's the code :

main.js:

Vue.http.options.root = 'http://api.domain.com/v1/'

In a component :

ready: function () {
    console.log(this.$http.options.root) // Correctly show 'http://api.domain.com/v1/'

    this.$http.get('/members/', null, { // FAILS because it tries to load /members/ in the current domain
        headers: {'auth-token': 'abcde'}
    }).then(function (xhr) {
        // process ...
    })
}

What am I doing wrong ?

I'm using Vue.js v1.0.15 and Vue-Resource v0.6.1

Thank you for your help.


Source: (StackOverflow)

How to fire an event when v-model changes ? (vue js)

I'm trying to fire the "foo" function with the v-on="click ..." but as you can see, need press the radio button two times to fire the event correctly . Only catch the value the second time that you press...

I want to fire the event without v-on="click..."; only fire the event when v-model (srStatus) changes.

here is my Fiddle:

http://fiddle.jshell.net/wanxe/vsa46bw8/


Source: (StackOverflow)