Stworzyłem aplikację z najnowszym VUE CLI i staram się zarejestrować globalną dyrektywę niestandardową bez sukcesu. Czy ktoś może powiedzieć mi, co robię źle?

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";

const app = createApp(App);

app.directive("highlight", {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value;
  },
});

app
  .use(store)
  .use(router)
  .mount("#app");

screenshot to show the issue

1
alpercation 16 październik 2020, 18:13

1 odpowiedź

Najlepsza odpowiedź

Dyrektywa v-highlight powinna mieć wartość ciągu typu jak:

     <h3 v-highlight="'yellow'">highlighted using yellow</h3>
    <h3 v-highlight="'#4455ff'">highlighted using blue</h3>

Jeśli podałeś go bez '' miałbyś następujący błąd:

[Vue ostrzega]: Właściwość "Yellow" uzyskano dostęp podczas renderowania, ale nie jest zdefiniowany na instancji

Oznacza to, że Twoja dyrektywa szuka danych lub obliczonej właściwości o nazwie yellow, która nie jest zdefiniowana w skrypcie.

Demo na żywo

Wyciągnąłem to Wydanie i naprawią ten błąd składni

1
Boussadjra Brahim 16 październik 2020, 17:12