Vue: [QUESTION ] Does exist clean solution for passing string literal attribute into my custom directive without having error?

[VonSandberg]

What problem does this feature solve?

Hey guys,
I'm just trying to write very simple custom directive, but I've got a problem with console error,
which told me this:

[Vue warn]: Property or method "testModal" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property. See https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

What I'm trying to solve is to make a directive as a trigger for the modal component (action mutating vuex store state). This simple directive has only bind and unbind hooks and looks like this example.

HTML

<button v-show-modal="testModal">Click here</button>

JS

{
  bind (el, binding) {
    el.event = event => {
      Store.dispatch(MODAL_ACTIONS.SHOW_MODAL, binding.expression)
    }
    el.addEventListener('click', el.event)
  },
  unbind (el) {
    el.removeEventListener('click', el.event)
  }
}

Problem disappears when I use single quotes inside double quotes
v-show-modal="'testModal'"

What does the proposed API look like?

More convenient would be adding param to directive object itself (I found this online, but it doesn't work for me, probably it's from older version of Vue)

{
  isLiteral: true,
  bind: //....
}

or something like this (same case, found it, but seems to not working anymore)

<button v-show-modal.literal="testModal">Click here</button>

Anyway, I jumped into docs and guide and didn't find any suggestion about this, so maybe there is a solution, but I just didn't come across it. Thanks in advance for any help :)

[sirlancelot]

<button v-show-modal="'testModal'">Click here</button>

Note the double and single quotes. Vue directive values are just JavaScript Expression so this is the recommended way to represent a string literal because it compiles down to plain JavaScript.

See Directive .literal Modifier Removed

[VonSandberg]

Thanks for replies, I know... single+double quotes do the trick, but still, it looks ugly and easy to miss or make a typo... Is out there different solution? Why is the mentioned solution no more appropriate?

[Giwayume]

Here is a quote from why another API change did not occur. I think the reasoning to why this proposal might be rejected is similar.

https://github.com/vuejs/vue/pull/1285

The issue I have with your proposal is that the same syntax, e.g. prop="123", will result in different values based on the component's prop type expectations. The consumer of the component will need to understand these complex conversion rules (A only gets casted into B when the props expects type A & B together...) in order to infer what eventual value something will be casted into.

In comparison, a simpler rule set is:

prop="xxx": always a string.
:prop="xxx": always an expression. 123, true and false should use this as well.
prop: only true when the type is boolean. A special case, but makes sense and easy to tell.

[posva]

What @sirlancelot said 🙂