Блог

Главная - Вопросы по программированию - Vue 3 — API композиции — Как использовать повторно используемый код из другого файла в шаблоне?

Vue 3 — API композиции — Как использовать повторно используемый код из другого файла в шаблоне?

#vue.js #vue-composition-api

Вопрос:

Я создал повторно используемый код в dateTime.js:

 import { ref, computed, watch } from 'vue';
import * as dayjs from 'dayjs';

export default function dateTime() {

    const newDateTimeString = ref(null);

    function showDateTime(data) {
        const dateTime = dayjs(data).format('DD-MM-YYYY') 
        newDateTimeString.value = dateTime;
    }

    return {
        newDateTimeString,
        showDateTime
    }
}

Код от dateTime.js вызывается в Table.vue:

Вопрос: Как я могу заставить это работать? Я хочу использовать {{ showDateTime(scope.row[itemIn.field]) }} в шаблоне. На мой взгляд, это должно в конечном итоге запустить функцию showDateTime внутри dateTime.js

Что я делаю не так? Код ошибки: Uncaught (in promise) TypeError: Object(...) is not a function который относится к const { showDateTime } = useDateTime(); 

 <template v-else-if="itemIn.type == 'dateTime'">
    {{ showDateTime(scope.row[itemIn.field]) }}
</template>

<script>
import { ref, computed } from 'vue';
import { defineComponent } from "vue";
import { useStore } from "vuex";
import { useDateTime } from '@/composables/dateTime';

export default defineComponent({
  name: "",
  props: {
    processingData: Object
  },
  components: {
    Flag
  },
  emits: ["unique", "refresh"],

  setup(props, {emit}) {
    
    const { showDateTime } = useDateTime();
    const store = useStore()

    function setStatus(id, route) {
        const object = {
            id: id,
            route: route
        }
        return store.getters.getStatus(object);
    }

    return {
      getScope,
      setUniqueId,
      getClass,
      getWidth,
      navigatePagination,
      setStatus,
      setTag,
      showDateTime
    };
  }
});

</script>

Комментарии:

1. Проблема в том, как вы используете dayjs. * импорт-это объект по определению.

2. Я не понимаю. Мой вопрос заключается в том, чтобы повторно использовать функцию showDateTime из файла dateTime.js внутри Table.vue внутри самого шаблона.

3. Тогда вы спрашиваете не о том, о чем нужно. Вы используете его правильно, но showDateTime вызовет ошибку независимо от того, где вы его используете по причине, указанной выше, по крайней мере, в соответствии с тем, что вы опубликовали. Также useDateTime называется «экспорт», но по умолчанию «импорт», но это приведет к другой ошибке, возможно, ваш реальный код отличается или вы повторно перенесли его в @/composables/dateTime

Ответ №1:

Как вы export default useDateTime крючок, вы должны импортировать его без { } :

 import useDateTime from '@/composables/dateTime';
Метки: