vue-composition-api

问题 I have a ref : const editItem = ref<object | null>(null) Here's an example value for it: { id: 1, title: 'Harry Potter', author: 'J.K. Rowling', created: '30-08-2000', } If I run console.log(editItem.value) , I see this object: But when I try to read the value's author with console.log(editItem.value.author) , then I see this error: Object is possibly 'null'. 回答1: Since the type of the ref is object | null , it could be null when you access it, leading to a runtime exception. The error

问题 I have an object that I want to access from all my web app pages. I am using Vue 3 reactivity but I have noted that in some instances, I have to refresh the page to get the object. How do I refactor my code to have the object always? See my code below: import { reactive, watch } from "vue"; import getSchoolDocuments from "../composables/getSchoolDocuments"; import { projectAuth } from "../firebase/config"; let user = projectAuth.currentUser; let userId; if (!user) { userId = localStorage

问题 i've a reactive object, on the save function i call toRaw in order to remove de object reactivity, but, when i change the reactive object props, also the group object is changing.... How??? const newGroup = reactive<Group>({ id: undefined, name: '', enabled: false }) const handleSave = () => { const group = toRaw(newGroup) persist(group).then(() => { newGroup.id = undefined newGroup.name = 'demo' console.log(isReactive(group)) //say false but the group.name value is demo }) } destructuring

问题 i've a reactive object, on the save function i call toRaw in order to remove de object reactivity, but, when i change the reactive object props, also the group object is changing.... How??? const newGroup = reactive<Group>({ id: undefined, name: '', enabled: false }) const handleSave = () => { const group = toRaw(newGroup) persist(group).then(() => { newGroup.id = undefined newGroup.name = 'demo' console.log(isReactive(group)) //say false but the group.name value is demo }) } destructuring

问题 I'm writing a unit test with jest, for my composition API component in vue.js. But I can't access to functions in composition API's setup(). Indicator.vue <template> <div class="d-flex flex-column justify-content-center align-content-center"> <ul class="indicator-menu d-flex justify-content-center"> <li v-for="step in steps" :key="step"> <a href="#" @click="updateValue(step)" :class="activeClass(step, current)"> </a> </li> </ul> <div class="indicator-caption d-flex justify-content-center">

问题 I'm writing a unit test with jest, for my composition API component in vue.js. But I can't access to functions in composition API's setup(). Indicator.vue <template> <div class="d-flex flex-column justify-content-center align-content-center"> <ul class="indicator-menu d-flex justify-content-center"> <li v-for="step in steps" :key="step"> <a href="#" @click="updateValue(step)" :class="activeClass(step, current)"> </a> </li> </ul> <div class="indicator-caption d-flex justify-content-center">

问题 I'm writing a unit test with jest, for my composition API component in vue.js. But I can't access to functions in composition API's setup(). Indicator.vue <template> <div class="d-flex flex-column justify-content-center align-content-center"> <ul class="indicator-menu d-flex justify-content-center"> <li v-for="step in steps" :key="step"> <a href="#" @click="updateValue(step)" :class="activeClass(step, current)"> </a> </li> </ul> <div class="indicator-caption d-flex justify-content-center">

问题 the problem has been solved, read through the question to see how step by step fix the problems I read about composition api(https://vue-composition-api-rfc.netlify.com/#api-introduction), and tried to convert my existing code which is based on typescript on Option api in vuejs, and i failed to make it work, and kinda confused about how composition api really work. my working code is below: <script lang="ts"> import Vue from "vue"; import {inputFields} from "@/mixins/inputField/inputField";

问题 I have these files App.vue, Header.vue, search.js and Search.vue App.vue is normal and just adding different views Header.vue has an input box <input type="text" v-model="searchPin" @keyup="searchResults" /> <div>{{searchPin}}</div> and script: import useSearch from "@/compositions/search"; export default { name: "Header", setup() { const { searchPin, searchResults } = useSearch(); return { searchPin, searchResults }; } }; search.js has the reusable code import { ref } from "vue"; export

问题 Recently i migrated our vue.js2.x project to typescript, and based on evan-you's comment in this issue: https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121 The Class API proposal is being dropped. so i'm using regular option based version of vue.js which it faced me with alot of type problems. I want to know is vuejs2.x composition api fully compatibile with typescript? and should i use it to solve all the problem? what is the best practice to do here in this situation? 回答1: I'm