Software
aixos reponse data can not assign to Vue instance's data
In my vue.js project, i get an array data by axios, and want to assign to bookList variable, but failed, bookList still equal to [], could you tell me why?
export default { ... data () { return { bookList: [] } }, mounted: function() { this.$nextTick(function(){ this.viewBooks(); }); }, methods: { viewBooks: function() { axios.get('/books.json') .then(res=>{ this.bookList = res.data.bookList; }) .catch(error=>{ console.log(error); }); } }How can I pass data to nested components from Vue instance
I get my data via AJAX from the Vue instance, and I need to pass that data to the components. I am now learning how Vue.js works, but I find the documentation a little fragmentary...
Here is aproximately my code:
<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>mysite</title> </head> <body> <div id="app"> <parent-component></parent-component> </div> <template id="parent-component-template"> <div id="the-template"> <div class="the-list"> <span is="sector-item" v-for="item in sectors" :sector="item"></span> </div> <button>Button</button> </div> </template> <template id="sector-item-template"> <span> {{ sector.name }} </span> </template> <!-- Vue.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <script> Vue.component('parent-component', { template: '#parent-component-template' }); Vue.component('sector-item', { props: ['sector'], template: '#sector-item-template' }); let app = new Vue({ el: '#app', data: { sectors: [{ 'id': 1, 'name': 'Industry' }] } }); </script> </body> </html>I get the following error:
[Vue warn]: Property or method "sectors" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.Where do I make a mistake?
Refer vue.js data but nothing
1.I am a beginner of vue.js, but when I was trying some examples, I found something uncommon. The first one is when I set id in the body, and write my js code as followed:
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./css/semantic.css"> <script type="text/javascript" src="js/vue.js"> </script> <title></title> </head> <body style="background-color:black;" id="app"> <div class="ui container" style="margin:20px;"> <div class="ui segment"> <h1>{{ title }}</h1> <p> {{ message }} </p> </div> </div> <script> var app = new Vue({ el: "#app", data: { message: "Hello, world!", title: "How about you?" } }) </script> </body> </html>And this is my result which does not show me data :
2.And the second problem is when I created an object in the data, and I refer it as followed, it also does not work in the div label. This is the code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./css/semantic.css"> <script type="text/javascript" src="js/vue.js"> </script> <title></title> </head> <body style="background-color:black;"> <div class="ui container" style="margin:20px;"> <div class="ui segment" id="app"> <h1>{{ article.title }}</h1> <p> {{ article.message }} </p> </div> </div> <script> var app = new Vue({ el: "#app", data: { article{ message: "Hello, world!", title: "How about you?" } } }) </script> </body> </html>So I wonder if there some conflicts when I was using semanticUI and vue.js?
Image not showing in vue.js and onsen ui app
I have used the following code to load image in my App which is based on Vue.js and Onsen UI . But they are not showing.
<div class="footer_logo"> <ul> <li class=""><img :src="logo" alt="logo" /></li> </ul> </div>I have imported the image using the following code in script
import foot1 from 'static/assets/img/footerlogos/1.svg'; export default { data() { logo: foot1; },Check if element has a specific id
i am using vuejs to drag/drop elements, and basicly i am using the evt.to and evt.from to know if i am dragging the element to the list2 for example, this evt.to/from returns me the html tree from my draggable element that has the list, so the parent has the id="list2" if i drag it to there, i need to know how i can track if my evt.to has the list2 element with plain javascript or maybe vueJS
tried this:
if(evt.to.getElementById("list2")){ console.log("IT HAS"); }i don't want to check on all document, just on that evt.to, how can i do that without Jquery ?
Check if input has required attribute + VueJs
I have the following code to check if an input field has the required attribute set on it.
computed: { isRequired: function (input) { input = document.getElementsByTagName('input'); for (var i = 0; i < input.length; i++) { return this.input.hasAttribute('required') ? 'test-class' : ''; } } }And the html template with code for the input component.
<div :class="isRequired" class="o-pf-required pull-left">*</div> <div class="col-md-6 col-lg-6" style="padding-right: 0px"> <!-- padding-right: 0px here cancels out padding on the bootstrap col-lg-12 wrapper keeping the 15px padding of the outer div consistant. --> <input :type="type" class="o-pf-input" :class="isCheckBox" :placeholder="placeholder" :name="placeholder" :required="isRequired ? true : false" :value = 'value' @input="value = $event.target.value"> <label :for="placeholder"> {{ placeholder }} </label> </div>What I want to achieve is to apply the test-class to the element where the o-pf-required class is to hide the asterisk but the browser gives me the following error:
A related issue on this: VueJS conditionally add an attribute for an element
How do i restore data onclick in laravel and vuejs?
I try to make a button that restores previous data from textarea how do I do that in laravel and vuejs.I submit the data with vuejs axios then return it modify, I try to make a button that restores previous data in textarea.
<div id="root"> <textarea v-model="areamodel" name="textarea" class="form-control" rows="10" id="textarea" ></textarea> </div> <button v-on:click="vanila" class="btn btn-md btn-info "><span class="glyphicon glyphicon-transfer"></span> Restore </button> public function vue(Request $request) { $vanila = $request->get('areamodel'); return response()->json([ 'vanila' =>$vanila ]); } $ses = session('areamodel'); new Vue({ data:{ areamodel:'', }, methods:{ vanila:function(){ this.vanila = data.areamodel; } } })Vue.js doesn’t work in Visualforce
I’m trying to use Vue.js on Visualforce (salesforce). Here is what I did so far.
Generate Vue.js app with vue-cli, build it
vue init webpack vue-sample cd vue-sample yarn yarn buildZip up dist folder
zip -r VueSample ./dist/*Create Static Resource in Salesforce (Name: VueSample, File: VueSample.zip)
Create Visualforce page
<html> <head> <meta charset="utf-8"></meta> <title>Vue Sample</title> <apex:stylesheet value="{!URLFOR( $Resource.VueSample, 'dist/static/css/app.090f1fe8ffa03cdc03a19db87af18abe.css' )}"/> </head> <body> <div id="app"></div> <apex:includeScript value="{!URLFOR( $Resource.VueSample, 'dist/static/js/manifest.a5a27e99ade9f48f7f62.js' )}"/> <apex:includeScript value="{!URLFOR( $Resource.VueSample, 'dist/static/js/vendor.ae75c6b5bea60f5d8cec.js' )}"/> <apex:includeScript value="{!URLFOR( $Resource.VueSample, 'dist/static/js/app.3c76c2b4382e06be5fe2.js' )}"/> </body> </html>
if I open this Visualforce page, nothing will be displayed. I checked Chrome’s console and I can see the javascript files and the css file in the static resource are correctly downloaded in the browser, and also no errors are displayed in the developer console. what am I missing here? why can’t I see anything?
please also let me know the best way to handle the file name’s hash here. I don’t want to change file hash in visualforce page whenever I upload new resource bundle. should I just stop adding the hash?
vuex actions vs repository pattern
Below is a sample of how I normally handle the data access layer. I was wondering how this would integrate with vuex. Should I use the same pattern and just refer to the repos from my actions? Or should the actions replace repository methods? Or any other best pratice?
abstract class BaseModel { id apiPath destroy() { console.log('DELETE', this.apiPath, this.id) } } class User extends BaseModel { static apiPath = '/user' name constructor(item) { super() this.id = item.id this.name = item.name } } class BlueprintApiRepository { model constructor(model) { this.model = model console.log(this.model) } create(name) { console.log('POST', this.model.apiPath, name) // API call let item = { id: Math.random(), name } // Item returned from REST API return new this.model(item) } getAll() { console.log('GET', this.model.apiPath) // API call let results = [{ id: 1, name: 'Michael' }, { id: 2, name: 'Berta' }] // returned from REST API return results.map(result => new this.model(result)) } } class UserRepository extends BlueprintApiRepository { constructor() { super(User) } someSpecificMethod() { console.log('GET', 'do some non blueprint api call') } static someSpecificStaticMethod() { console.log('GET', 'do some non blueprint api call') } } let userRepo = new UserRepository() let user = userRepo.create('Peter')Redirect to requested page after login using vue-router
In my application some routes are just accessible for authenticated users.
When a unauthenticated user clicks on a link, for which he has to be signed in, he will be redirected to the login component.
If the user logs in successfully, I would like to redirect him to the URL he requested before he had to log in. However, there also should be a default route, in case the user did not request another URL before he logged in.
How can I achieve this using vue-router?
My code without redirect after login
My login function in my login component
I would be very thankful for any kind of help!
Vee-validate for password and confirm password
I am trying to make a password set and reset system on vuejs in which i am using vee-validate to validate wether password entered in both the input tag are same or not and they prevent submission if they aren't same. This is my code :
<template> <div> <form @submit.prevent="validateBeforeSubmit()"> <div class="input-group"> <div class="input-group-addon"> Enter Password </div> <div class="input-fields"> <input v-validate="'required'" name="password" type="password" class="form-control" placeholder="Password"> <input v-validate="'required|confirmed:password'" name="password_confirmation" type="password" class="form-control" placeholder="Password, Again" data-vv-as="password"> </div> </div> <div class="alert alert-danger" v-show="errors.any()"> <div v-if="errors.has('password')"> {{ errors.first('password') }} </div> <div v-if="errors.has('password_confirmation')"> {{ errors.first('password_confirmation') }} </div> </div> <button type="submit" class="btn btn-primary"> Validate! </button> </form> </div> </template> <script> export default{ name:'password', methods: { validateBeforeSubmit() { this.$validator .validateAll() .then(function(response) { // Validation success if response === true }) .catch(function(e) { // Catch errors }) } } } </script>Check if user input text less than 50 characters in vue js
I want to check the input length in vue js. I have the function to check whether the user input is empty or space only with
if(!this.content || this.content.trim() === ''){ return }Now i want to check the user input length. If less than 50 characters system will showing a alert. Any suggestion?
Laravel Vue Routing
I would like to hava all tr as a router link in my table, but when I add this before tr, then every css from table disappear and my View looks bad. Is a possibility to do this better?
<table v-if="seenOrders" id="ordersTable" class="table"> <tr> <th>Numer zamówienia</th> <th>Imię</th> <th>Telefon</th> <th>Email</th> <th>Status</th> <th>Data zamówienia</th> </tr> <router-link to="/orderDetail" class="order-row" > <tr v-for="order in orders" v-on:click="details(order.id)"> <td>{{order.number}}</td> <td>{{order.client_name}}</td> <td>{{order.phone}}</td> <td>{{order.email}}</td> <td>{{order.actual_status}}</td> <td>{{order.order_date}}</td> </tr> </router-link> </table>How to make modal box in vue js in <a> tag?
I am having a list of navbar menu items as like,
<div class="navbar navbar-default menu-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="index.html" class="navbar-brand"><img src="images/logo.png" alt="logo"><span>Sd Residency</span></a> </div> <nav class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="">Rooms</a></li> <li><a href="">Gallery</a></li> <li><a href="">Contact Us</a></li> <li><a href="" id="show-modal" @click="showModal = true">Sign In</a> </li> </ul> </nav> </div> </div>In the above list, if i click on sign-in menu, a modal box needs to be displayed in which there should also be a sign up option in which if we click on sign up, a another modal box needs to be displayed..
For this, i have started with initial step of using @click,
<li><a href="" id="show-modal" @click="showModal = true">Sign In</a></li>And,
<modal v-if="showModal" @close="showModal = false"> <h3 slot="header">Sign In</h3> </modal>And also,
<script type="text/x-template" id="modal-template"> <transition name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header"> default header </slot> </div> <div class="modal-body"> <slot name="body"> default body </slot> </div> <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')"> OK </button> </slot> </div> </div> </div> </div> </transition> </script>Script,
export default { data(){ return{ showModal: false, } } }and,
Vue.component('modal', { template: '#modal-template' }) new Vue({ el: '#app', data: { showModal: false } })It is displaying only the <h3> that shows sign in displays if i click on sign in <a> tag and i am not getting modal box, I don't understand how to do it to get the modal box and i am sure i am wrong with this way. But dont know how to achieve. Kindly help me to achieve getting the modal box while clicking the sign in option.
How set Vue inputs via phantomjs?
The code like that:
document.getElementById('email').value = 'login'; document.getElementById('password').value = 'pwd'; document.getElementById('button').click();does not work because Vue uses v-model value instead of value attribute. Is there a way to change input and model values via javascript in phantomjs?
Notes
Setting attribute v-model for those input do not solve the problem.
Using CSP-compliant-build is not possible, because I can not rebuild project from sources.
Any extension for chrome also can not be used because page is rendered via phantomjs
VueJS cannot get path after reload or direct link
I have trouble with VueJS(or with my brains). Ok. I have vuejs-webpack project and this router:
import Vue from 'vue' import Router from 'vue-router' import Main from '@/components/Main' import CreateTravel from '@/components/CreateTravel' import TravelDetail from '@/components/TravelDetail' import Friends from '@/components/Friends' import UserTravels from '@/components/UserTravels' import User from '@/components/User' import Settings from '@/components/Settings' import UserActivate from '@/components/UserActivate' Vue.use(Router); export default new Router({ mode: 'history', routes: [ { path: '/user/activate/:secret', name: 'UserActivate', component: UserActivate }, { path: '/', name: 'Main', component: Main }, { path: "/create", name: "Create", component: CreateTravel }, { path: "/travel/:id", name: "Travel", component: TravelDetail }, { path: "/friends", name: "Friends", component: Friends }, { path: '/user/:id', name: 'User', component: User, children: [ { path: 'travels', name: 'UserTravels', component: UserTravels } ] }, { path: '/settings', name: 'Settings', component: Settings } ] })And main.js:
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import VeeValidate from 'vee-validate'; import VueResource from 'vue-resource'; Vue.use(VeeValidate); Vue.use(VueResource); Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: {App} });And when I redirect to some link I have 404. Example, after redirect on link http://localhost:8080/user/activate/73e7bcfa-a9d2-4d32-8ddc-697a82bf6363 from email I look "Cannot GET /user/activate/73e7bcfa-a9d2-4d32-8ddc-697a82bf6363". In console browser next:
361d711d-05ef-4c5e-944a-7e511ba104ab:1 GET http://localhost:8080/user/activate/361d711d-05ef-4c5e-944a-7e511ba104ab 404 (Not Found). Thanks for your help
How do I speed up 'watching' multiple arrays with the same data in vue.js
A large amount of data (+-15 000 records) is loaded via AJAX which is then used to populate two arrays, one sorted by ID the other by a name. Both the arrays contains the same objects just ordered differently.
The data is displayed in a tree view but the hierarchy can be changed by the user. The tree is virtualised on the first level so only the records displayed + 50% is 'materialized' as vue components.
Supplying both of the arrays as data to a vue instance is very slow. I suspect vue.js is adding observers to the objects twice, or change notifications is sent multiple times, I don't really know.
So only one of the arrays is added to vue the other is used out of band.
Vue slows down the addition of elements to an array a lot. If the array is populated before it is bound to the vue instance it takes +-20s before the tree view is displayed. If I bind it before populating the arrays it takes about +-50s before the tree view becomes usable (the elements are displayed almost instantly). This could be because of notifications going for all these elements added.
Is there a way to add a second array with duplicate data so vue.js watches it for changes, but it doesn't slow vue down as much?
Is there a way to switch watching/notifications of temporarily so elements could be added to an array without the penalty, yet be 'watched' when notifications is switched back on?
I'm not sure that my reasoning behind the slowdowns is correct, so maybe my questions are misguided.
O another thing I need the arrays to be watched and only one of the properties of the elements.
GraphQL vue apollo query and mutation same view
I'm just starting to use GraphQL with Apollo and Vue, so it might be a "stupid" question but I can't figure how to do.
How can I do inside the same view, a query to fetch one object, and update it using a mutation
Let's say I have a simple schema
type Product { id: ID! title: String! description: String }And a vue component
<script> // GraphQL query const ProductQuery = gql ` query($id: ID){ Product(id: $id) { id title description } } `; const UpdateProductQuery = gql ` mutation updateProduct($id: ID!, $title: String!, $description: String) { updateProduct( id: $id, title: $title, description: $description, ) { id } } `; export default { data() { return { Product: {}, }; }, apollo: { Product: { query: ProductQuery, variables() { id: 1234, }; }, }, methods: { updateProduct() { this.$apollo.mutate({ mutation: UpdateProductQuery, variables: { id: this.Product.id, title: this.Product.title, description: this.Product.description, }, }) } } }; </script>Now how am I supposed to write the template part ? Can I link the Product object to a v-model inside an input ?
<template> <section> <input v-model="product.title"></input> <input v-model="product.description"></input> <button @click="updateProduct">Update</button> </section> </template>Thanks for your help.
ESLint code format in Vue
I created a project with npm and vuejs/vue-cli.
I imported the ESLint extension.
I have eslint entries in my package.json file.
Now when I format my code (right-click, Format Code), it completely disfigures my code.
What do I have to do to get vscode to format according to the ESLint rules?
But on the website, ESLint complains that everything is not formatted correctly, and so it is obviously installed and running in some sense:
Execute a code after every function is called
I have a scrolltobottom() function that is run after every function is executed.
How can I refactor the code so that I don't need to type scrolltobottom() everywhere?
Preferably without using Jquery.
async function initBot () { let botui = BotUI('homepage-bot', { vue: Vue }) let scrolltobottom = () => { let ele = document.getElementById('botui') document.body.scrollTop = ele.clientHeight } await botui.message.bot({"Hello"}) await scrolltobottom() await botui.message.bot({"Do you like apple or orange?"}) await scrolltobottom() await botui.message.button({"Orange", "Apple"}) await scrolltobottom() }