How can I pass props defined in the contexts file to components in my stories? Docs does not make this clear: https://www.npmjs.com/package/#storybook/addon-contexts
I am using vue.
Is there a working example of someone using addon-contexts?
I m looking too for something similar and i have founded this link: https://monorepo-git-add-addon-contextsvue-i.storybook.now.sh/examples/vue-kitchen-sink/?path=/story/addon-contexts--languages
Maybe it can help ;)
Related
Have a situation in which there are two different components, that have templates in which there are 'this' used. Removing all 'this' from templates right now, but saw this situation and got curios why it is happening like this.
In this case it throws error:
<a :href="`${this.$locale() ? "Yes" : "No}`">
In this case it works:
<title :lang="this.$locale()">
These are just examples, but is there a reason that one works and other throws error? Couldn't find any information on this in Vue documentation. Could this be because of ternary operation?
First of all, to be clear for the people reading this, you shouldn't use this inside Vue SFC templates.
To anwser, that's because of how Vue compiles your template and its properties. I'm not an expert on Vue internal mecanics so please take what I say with caution.
:lang="this.$locale() Here, it could be that Vue removes the this reference at build time.
:href="`${this.$locale() ? "Yes" : "No}`" Here you're using a string interpolation, which is evaluated at runtime. Vue has no way to remove the this safely, because it could be refering to something else than the component instance. So this just stays as is in the final bundle and breaks at runtime.
This is just my guess from my understanding of Vue. I think only a Vue maintainer / contributor could anwser this properly.
What problem does this feature solve?
<code-box title="基本" describe="button基本用法">
<i-button>Default</i-button>
</code-box>
I want to get default Slot String like <i-button>Default</i-button> in codeBox.
I can find then api _slotContents in vue 1.x.
Is there any way can get the same function in vue 2.x?
What does the proposed API look like?
_slotContents in vue 1.x
If I understand correctly, you want to use scoped slots.
If for some reason you really want to get the rendered html inside your component you can use this.$el.innerHtml.
This question triggered in my mind while reading through Vue's official guide here.
I don't know if I find the answer to this question on proceeding further to read more from the official guide, but curious to know if it's possible or not.
Well, I'll update here as soon as I got to know the answer.
Screenshot from official guide
A component must use a single template or component option object, and that template must provide a single root element to mount. The template is converted into a render function internally, and Vue can only have 1 render function.
Your component can in turn contain a component that is dynamic, however.
https://v2.vuejs.org/v2/guide/components-dynamic-async.html
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!
Hi I am looking for a solution for two way binding in Vue.js 2. I found a answer here about two way binding but it is in Vue.js 1. I tried to work it in Vue.js 1. But it didn't work. Can anyone help me here.
Why I want that?
A - I have a contenteditable div and a span tag inside which is shows a variable with v-html. But I want some functions to call when some edit happens. #change and #keyup don't work with span in vuejs 1. So I moved to custom directives.
To support something like this in vue2.0: as suggested by Evan You in forum here is to put these kind of functionality in a component and to reuse the same functionality on multiple components you can extract it into a shared mixin.
My suggestion is that the logic should be handled inside the component. In 2.0 v-model can work on components, e.g. https://github.com/vuejs/vue/blob/next/examples/select2/index.html
If you want to reuse the same logic on multiple components you can extract it into a shared mixin.