Safe navigation at v-model directive in Vue.js - javascript

For example we have the following input component:
<input type="text" v-model="example.modules.report.description.title"></input>
Full source
I don't want to define in data following object:
example: {
modules: {
report: {
description: {
title: ""
}
}
}
}
I anticipate that Vue.js will create that structure itself (just like Angular.js), but it doesn't do it.
Is there any way to solve this problem?

the data() method is a factory that initializes the model on which the component is bound.
The docs explains clearly how is supposed to make it work
You should declare the initial value on the JavaScript side, inside the data option of your component.
vuejs docs
If your model is so complex to require all these nested compositions maybe you have to be fine with it or design a different data model.......or create your model with your own factory
export default {
data : example()
}

Related

Tracking data changes in Vue.js on a Javascript that already exists?

I have a project that I've been working on for awhile that I might want to use vuejs for some of the UI elements. I fired up a tutorial and tried to piece together a basic example.
I have a basic javascript object like so:
var hex = {};
hex.turn_phase = 'unit_placement';
On my template, I have:
var app = new Vue({
el: '#vue-test',
data: {
message: 'Hello Vue!',
turn_phase: hex.turn_phase,
},
delimiters: ["<%","%>"],
mounted: function() {
this.fetch_turn_phase();
},
methods: {
fetch_turn_phase: function() {
Vue.set(this, 'turn_phase', hex.turn_phase);
},
}
});
This renders the correct turn_phase on the template initially, but if I change the hex.turn_phase in the browser console, the template doesn't react.
Is there something that I missed in this basic example?
It looks like you may have made things unnecessarily difficult. Just access your Vue instance via app?
Always make sure you go through the setters generated by Vue.js. These are watched and will re-render your component.
Instead, try using
app.turn_phase = 'unit_placement';
You can get a better understanding here, Reactivity
Vue creates all the data variables, computed properties and values returned from methods reactive. in your case since you
are changing hex, which is not a vue variable, so vue will not detect any changes in this variable. However if you change message variable, it will be reflective and will be changed in the template.

Using Vue dynamic route name, in component function

I've been trying to make a dynamic view rendering, with Vue and Laravel. However, i can't wrap my head around how i am supposed to parse the dynamic parameter, to the component function.
Router.map({
'/cms-admin/:page': {
component: {
template: returnView(this.$route.params.page)
}
}
});
function returnView (option) {
// Generate the AJAX request here
}
Through documentations i've read, that $route should solve the issue. I can parse $route into the view, and print the text on the page. However, i can't use $route inside the map, to get the dynamic name?
Say, i enter "/cms-admin/dashboard", 'dashboard' should get parsed down to the template parameters.
Thanks in advance,
Steven
register the individual templates for the pages as partials v1 v2
use <partial> and $route
js:
component: {
template: '<partial :name="partial" v-if="partial !== ''"></partial>',
data() { return { partial: '' } },
ready() { this.partial = this.$route.params.page},
}
Note: Not sure whether you can access this.$route in data(), therefore I used the ready() event, but maybe you can drop that and put it directly in data().

Adding new keys generated by a variable to a object in Vue

Building a project using Vue.js (and Laravel), the following (greatly simplified) code results in the below error:
Vue component:
<template>
<input type="text" class="form-control" v-model="main_object[item_id][my_answer_key]">
</template>
<script>
export default {
props: [
],
data() {
return {
main_object: {},
item_id: '1234',
my_answer_key: '5678'
}
},
ready: function () {
vm = this;
},
methods: {
}
}
</script>
Error received:
We know you can use the vm.$set() method to add properties to the object. However, we’re building the model path on the fly (item_id and my_answer_key change depending on various user options being selected). It seems like we have to write a method that determines if the object property is already set, and if it's not set, to then set it. Is there a better way to accomplish the above?
You could seemingly get around this by using the created hook and $set:
created: function () {
this.$set(this.item_id + "." + this.my_answer_key, "")
}
However, if item_id and my_answer_key can change, this approach will ultimately not work because Vue does not have dynamic two way binding. In other words, the binding in your v-model will be created once and will not change later if either of the item_id or my_answer_key values change.
So, to accomplish something like this, you might need to resort to a kludge like using a v-if and toggling it to destroy and recreate the input (and it's binding). That might work.
Sometimes, computed's can help with these situations. Bind your input to a simple attribute on your data model and use a computed to generate the actual nested data model you need elsewhere.

What is the difference between a ractive template, partial and component

I've built a ractive.js app using partials. These partials are loaded via fetch/ajax - and all works nicely.
I then decided I wanted to encapsulate data along with the partial so looked at components - as I understood a component to do just that: Isolate a template/partial with its data.
I then looked to load the components in: http://ractivejs.github.io/ractive-load/
However, I don't really see the advantage of this approach - as it appears with the loader you can only load in the components template, not the entire encapsulated component (data, templates etc). You still have to put the data onto the main ractive instance (as you would with a partial).
I'm trying to dyanamically update the component. I'm also using page.js for routing. I'm trying to separate out all the concerns.
I'm probably not explaining myself very well - here is my code... most of it was taken from martydpx's answer here How to create Ractive's subcomponents dynamically and change them programmatically )
....
<dynamic name='{{name}}'/>
</script>
<script>
// Component loader
Ractive.load({
home: '/components/home.html', // seems this can only contain a template. Is it possible for it to contain everything - data and all?
packs: '/components/packs.html',
....
addplayer: '/components/addplayer.html',
notfound: '/components/notfound.html',
}).then( function ( components ) {
Ractive.components[ 'home' ] = components.home;
Ractive.components[ 'packs' ] = components.packs;
....
Ractive.components[ 'addplayer' ] = components.addplayer;
Ractive.components[ 'notfound' ] = components.notfound;
// dynamically load component based on route
Ractive.components.dynamic = Ractive.extend({
template: '<component/>',
components: {
component: function() {
this.set('foo','bar'); // I can dynamically set the data here.. but how would I add defaults for each component, within the component?
return this.get('route');
}
},
oninit: function(){
this.observe('route', function(){
this.reset();
},
{ init: false}
);
}
});
var r = new Ractive({
el: document.body,
template: '#template',
data: {
route: 'home'
}
});
// Routing. Sets the route... which triggers the component
page('/', index);
...
page();
function index() {
console.log('index');
r.set('route','home')
}
EDIT
I've read this - which has been a great help :)
https://github.com/ractivejs/component-spec/blob/master/authors.md
In the dynamic component scenario - how would I dynamically update component specific data. I seem to be able to do it when the component tag is hardwired into the page... but not when the component tag is dynamically created. After much playing about in the console - its as if it doesn't see the dynamic component. So things like r.findComponent('home').get() don't work.
Yet, if I put a <home/> tag in the template - it does work.
Also, do components automatically 'tear down' when they're un-rendered?
I'm not 100% sure what you are looking for.
First you create a child component -
var MyWidget = Ractive.extend({
template: '<div>{{message}}</div>',
data: {
message: 'No message specified, using the default'
}
});
You register this with Ractive runtime
Ractive.components.widget = MyWidget;
Then you create a parent component
var Parent = Ractive.extend({
template: '<div>
<MyWidget message={{widget}} />
</div>'
});
You use the parent instance to pass the data to child
// Live instance of parent
new Parent({
el: 'id',
data : {
widget: {
message : 'Waddup kiddo'
}
}
});
data.widget gets mapped to MyWidget's data, in-turn gets the message data.
For more info refer this
Generally there are 3 types of components you will be creating & using -
Self-sufficient Components - It knows everything it needs to know by itself. You don't pass anything to it. It creates it's own data or knows where to get it from. Ex: A logo component which knows by itself where to get the image from.
Dumb Components - They have no intelligence and all the data that it needs should be passed from parent. Like in our example - MyWidget has no idea where and what message stands for. Just renders it. No questions asked. Parent will fetch message and just pass it on.
Smart Components - Components which do some heavy lifting. An example would be Profile component. Parent will pass just a profileID to this, and it knows where to get profile data from, does some ajax calls, knows how to parse and interpret the data, may be even starts a socket and listens to changes etc.
So you decide how you want to make your components, who takes responsibility and think about data-encapsulation then.

Ember.js - What is the best way to store application specific data in ember?

I need to access the application specific data in my components as well as routes. I also need to set the application specific data from normal JS.
I have currently created an object with global namespaces (App.globalSetting) and then created the variables as properties on this object.
I am then able to set and get the variable using App.globalSetting.set() and App.globalSetting.get().
Is the above method a good practice or is there a better way to do the same.
Also the data to be stored is critical. So please suggest a best way to accomplish this task.
You may want to take a look at Services: http://guides.emberjs.com/v2.0.0/services/.
From the guides:
"An Ember.Service is a long-lived Ember object that can be injected as needed."
Example service:
settings-service.js
export default Ember.Service.extend({
exampleSetting: true,
update(value) {
this.set('exampleSetting', value);
}
});
How to access this service from a Component (or Route):
export default Ember.Component.extend({
settings: Ember.inject.service('settings-service'),
actions: {
doSomething(val) {
this.get('settings').update(val);
}
}
});

Categories