Vue JS Crash Course (2019)

What people said

Recommends Alwaysblue · 2019-02 · Stack Overflow · on “What is v-bind in vue”

I am starting with Vue and following the video tutorial by Traversy Media on Youtube [this video] There he have used v-bind but I didn't proper explained what are they (or at-least I am unable to get it) For some reason, I still find documentation slightly hard to comprehend. So this is what we are doing. <template> <div id="app"> <p>{{msg}}</p> <Todos v-bind:todos="todos" /> </div> </template> <script> import Todos from "./components/todo.vue"; let todo = [ { name: "Rohit", title: "Full Stack Developer" }, { name: "Varun", title: "head of marketing" }, ]; export default { name: "app", components: { HelloWorld, Todos }, data() { return { msg: "hello", todos: todo }; } }; </script> Question:1 Can

Recommends Rick K. · 2019-07 · Stack Overflow · on “Which command do I use to generate the build of a Vue app?”

THIS IS FOR DEPLOYING TO A CUSTOM FOLDER (if you wanted your app not in root, e.g. URL/myApp/) - I looked for a longtime to find this answer...hope it helps someone. Get the VUE CLI at [LINK] and use the UI build to make it easy. Then in configuration you can change the public path to /whatever/ and link to it URL/whatever. Check out this video which explains how to create a vue app using CLI if u need more help: [this video]

Recommends balexandre · 2021-01 · Stack Overflow · on “how to bind search query variable to input field AND use it with computed function in Vue js?”

I then will recommend some nice VueJs tutorial, like VueMastery or Vue school or even a full VueJs course on Youtube [this video] ... regarding my idea, something like this -> [LINK] - just realize that I' only filtering by `firstname` as you can see in code, and it's case sensitive, just so you get the idea

Cites klewis · 2019-03 · Stack Overflow · on “Determing when to use data structure approaches in Vue.js”

I'm going through Vue.js v2 documentation right now, and feel like I am running into a conflict in how data is structured. In official documentation [LINK] they use the following to create data: var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) But while watching a video on Vue JS Crash Course 2019 [this video] the speaker uses the following approach: export default { name: "app", data() { return { data: data } } } Are both these approaches valid as of today for Vue.js in 2019? If so, when do we use them in what environments? Also, why is it with the second example, I can't assign it to a specific element ID, like in the first example? There is a lot of talk in the documentatio

Cites Narktor · 2019-10 · Stack Overflow · on “Why does this event actually trigger?”

Im in a vue project using routing, its a tutorial: [this video] The repo with the full code is here: [LINK] My Home.vue looks like this: <template> <div id="app"> <AddTodo v-on:add-todo="addTodo"/> <Todos v-bind:todos="todos" v-on:del-todo="deleteTodo"/> </div> </template> <script> import AddTodo from '../components/AddTodo' import Todos from '../components/Todos' export default { name: 'home', components: { Todos, AddTodo }, data() { return { todos: [ { id: 1, title: "Todo one", completed: false }, { id: 2, title: "Todo two", completed: true }, { id: 3, title: "Todo three", completed: false } ] } }, methods: { deleteTodo(id){ this.todos = this.todos.filter(todo => todo.id != id) }, addTodo(newTo

Cites minh nguyen · 2020-02 · Stack Overflow · on “Vuejs axios error when making post request”

I'm new to vuejs and i'm following this tutorial ( [this video] ). When i tried to make a post request i got this error (has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.) I could console.log(res.data) but i couldn't put it inside todos[] array. addtodo(newTodo){ const {title,completed} = newTodo; axios.post(' [LINK] ',{ title, completed }) .then(res => { this.todos = this.todos.push[res.data]; //console.log(res.data); }) .catch(err => console.log(err)); }

Cites u123 · 2020-02 · Stack Overflow · on “router.js file NOT created when installing vue-router”

I am following this guide: [LINK] [this video] At the end its shown how to install the vue-router through vue ui . I have done that as well: [LINK] but for some reason I don't get a router.js file as the author describes in the video. Is something wrong with my installation or has the creating of a router.js file been removed in later versions of vue?? I am on: Now using node v10.0.0 (npm v5.6.0) @vue/cli-service-global@4.2.2 @vue/cli 4.2.2

Cites Steve · 2020-06 · Stack Overflow · on “Delete item for todo app in with $emit 2 level up or 1 level up?”

I have 3 .vue here: App.vue (default), Todos.vue and Todoitem.vue. I am following the tutorial from [this video] . May I know why the author in TodoItem.vue emit id two level up to App.vue to perform the method to delete? Is it best practice or better coding style? Is it easier to just go up one level for Todos.vue to do the same? Below is my one level up approach for any comment. Below is my TodoItem.vue code <template> <div class="todo-item" v-bind:class="{'is-complete':todoObj.completed}"> <p> <input type="checkbox" v-on:change="markComplete" /> {{todoObj.title}} <button @click="$emit('del-todo',todoObj.id)" class="del">x</button> </p> </div> </template> <script> export default { name: "TodoIt