Stackoverflowers, I'm a newbie of vue.js, I try to implement a binding effect which can enable the changing of binding created by v-model. To put things clear, I give an example as following:
<codemirror ref="outputCm" v-model="output" :options="cmOutputOptions"></codemirror>
Here we have a codemirror element, it's content is binded with variable output, is it possible in some place after I changed output to some-variable, its content now is binded with some-variable? I tried to use assignment, it didn't work. And I tried my best to google, but I'm still disappointed. If anybody know how to give this a shot, I'm appreciated.
yes you could make it but from your data object
data: {
output: (your logic here)? some-variable : 'some thing else'
}
Related
So, I'm trying to understand code written by someone else and there's one thing I haven't figured out. Why would you use colon in an emit-name?
Here's an example:
this.$emit('update:compare', { key, values })
The problem is that I can't find the component listening to this emit. I've been looking for v-on:update:compare="" and #update:compare="" but I can't find it. What does the colon even do?
I've found this other thing in the same component as the emit that I don't recognise either:
model: {
prop: 'compare',
event: 'update:compare',
},
And I guess it has something to do with it but I can't figure it out.
Would anyone be so kind to shed some light on this for me, please?
Just to be specific re. documentation in link in comments above (which is worth reading), you can add .sync to a v-bind in order to allow props to be passed back "up" to the parent automatically (2 way binding). I wasn't aware of this either until I started delving into the vue query builder library and had exactly the same problem as OP. https://github.com/dabernathy89/vue-query-builder
<some-component :someData.sync="someData" />
// Inside component method:
this.$emit('update:someData', "New value");
I've been breaking my head over this for the last few hours and no matter where I look I can't seem to find the answer.
I'm using vue2-frappe as my chart library. I'm using a simple bar chart to display certain values by day. Everything was fine until my higher-ups decided they wanted to show a whole year's worth of values on this chart, meaning I have to add some pagination to it.
The problem is, now I can't figure out how to make the chart rerender. I've tried replacing the entire object I've bound the chart to, as well as manipulating specific values, but nothing seems to make the component rerender.
In the documentation for frappe.js, you can modify data via specific methods, but this being Vue I can't just call chart.update() like in normal .js. And if I inspect the component via vue dev tools, I can see it contains the modified data, it just doesn't redraw itself.
Anyone have an idea what to do?
I would try to force update the view component.
VueJs reactivity can sometimes be confusing where you think it should react to changes but it doesn't.
You can force a view update like so:
// Globally
import Vue from 'vue';
Vue.forceUpdate();
// Using the component instance
export default {
methods: {
methodThatForcesUpdate() {
// ...
this.$forceUpdate(); // Notice we have to use a $ here
// ...
}
}
}
You can read about correct ways of re-rendering here: https://michaelnthiessen.com/force-re-render
There are caveats to this approach as outlined in vueJs's docs: https://v2.vuejs.org/v2/guide/list.html#Caveats
Note #
A force re-render wont update computed values, but your computed property shouldn't contain any external non-reactive variable anyway.
Note 2
The above article written by Michael Thiessen also states the best way in his opinion is key-changing which I think we all should be aware of.
I hope this puts you on the right track. It sounds like (with limited information) you could be replacing the data but using the same key.
I am trying to access data from a single-file component in Vue, but can't find any way of doing it. I have tried using $emit, but can't get thath to work either. The data string has to be blank as it gets modified by an input field.
I have seen others' solutions here on SO, but either the don't fit with my problem or I can't get them to work. I want to try to keep it as simple and understandable as possible.
You can use the special attribute ref:
<child-comp ref="child"></child-comp>
In JS:
vm.$refs.child.YOUR_DATA
Hope this helps!
I am currently developing a web application that is used to display elements for events on a map provided by HERE Maps. I am using Vue.
I have some components, but the relevant component is the component HereMaps.vue which initializes the map using the HERE Maps Api.
The HERE Maps Api provides the possibility to place so called InfoBubbles on the map showing additional information. These InfoBubbles can be provided some HTML-code in order to customize their appearance.
Please refer to the documentation for additional information
Following the documentation the code looks something like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<div class='someClass'>Some Content</div>"
});
this.ui.addBubble(bubble)
This is happening after mount in the "mounted" method from Vue in the "HereMaps" component.
The Bubbles are added in a "closed" (hidden) form and dynamically "opened" to reveal their content when the corresponding marker icon on the map is clicked. Therefore the HTML-code is present on the DOM after the component is mounted and is not removed at a later stage.
Now instead of supplying custom code within each bubble added to the UI i want to just add a component like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<myDynamicComponent></myDynamicComponent>"
});
this.ui.addBubble(bubble)
It does not matter to me wether the component is initialized using props or if it is conditionally rendered depending on the state of a global variable. I just want to be able to use the "myDynamicComponent" in order to customize the appearance in a different file. Otherwise the design process gets very messy.
As far as i know this is not possible or at least i was not able to get it work. This is probably due to the fact that the "myDynamicComponent" is not used within the "template" of the "HereMaps" component und thus Vue does not know that it needs to render something here after the directive is added to the DOM in the "mounted" method.
This is what the InfoBubble looks using normal HTML as an argument:
This is what the InfoBubble looks using the component as an argument:
It appears to just be empty. No content of the "myDynamicComponent" is shown.
Does anyone have any idea how i could solve this problem.
Thank You.
Answer is a bit complicated and I bet you wouldn't like it:)
content param can accept String or Node value. So you can make new Vue with rendered your component and pass root element as content param.
BTW, Vue does not work as you think, <myDynamicComponent></myDynamicComponent> bindings, etc exists in HTML only in compile time. After that all custom elements(components) are compiled to render functions. So you can't use your components in that way.
Give us fiddle with your problem, so we can provide working example:)
I'm trying to create a dynamic input element that is draggable. Now the problem is I create an element but when I use something like
$("#in"+index.toString()).draggable({cancel:true});
after I append it to the container div, it's not working. Basically it's not working for the dynamically created input element of a certain id. Here's the code and please feel free to point out problems. I could really use some help on this one. Thanks!
http://jsfiddle.net/ithril/hRCun/5/
The problem is that you are creating a new element that is not bound to the UI functions. I would suggest using clone(true,true) and then changing the parameters of the cloned element as need be. You can learn more about clone here. http://api.jquery.com/clone/