Open fannyfan414 opened 1 year ago
@fannyfan414 Hi, I tried myself and it works for me.
npm install -g @quasar/cli
npm init quasar
cd quasar-project
npm i -S vue-at # (3.x for Vue3)
quasar dev
<template>
<at-ta :members="members">
<q-input
v-model="name"
type="textarea"
:rows="1"
:autogrow="false"
resize="none"
/>
</at-ta>
</template>
<script>
import { defineComponent } from 'vue'
import At from 'vue-at' // for content-editable
import AtTa from 'vue-at/dist/vue-at-textarea' // for textarea
export default defineComponent({
name: 'IndexPage',
components: { At, AtTa },
data: () => ({
members: ['hello', 'a12', 'a123'],
}),
})
</script>
@fritx hmm, strange behaviour:
If create separate vue component TestComponent.vue
<template>
<q-card>
<q-form>
<at-ta :members="members" :avoid-email="false" class="full-width">
<q-input
v-model.trim="form.name"
type="textarea"
:rows="1"
:autogrow="false"
resize="none"
/>
</at-ta>
</q-form>
</q-card>
</template>
<script setup>
import AtTa from "vue-at/dist/vue-at-textarea";
import { ref } from "vue";
const props = defineProps({
message: {
required: true,
type: Object,
},
});
const form = ref(props.message);
const members = ["hello", "a12", "a123"];
</script>
And then import it into another component
<template>
<div>
<test-component :message="testMessage" />
<at-ta :members="members" :avoid-email="false" class="full-width">
<q-input
v-model="testMessage.name"
:rows="1"
:autogrow="false"
resize="none"
type="textarea"
/>
</at-ta>
</div>
</template>
<script setup>
import { ref } from "vue";
import AtTa from "vue-at/dist/vue-at";
import TestComponent from "components/TestComponent.vue";
const testMessage = ref({ name: "" });
const members = ["hello", "a12", "a123"];
</script>
Input from TestComponent is working, but input from main component return error if type something
caught TypeError: Cannot read properties of null (reading 'innerHTML') at Proxy.handleInput (At.vue:296:21) at onInput._cache.
._cache. (AtTemplate.vue:7:13) at callWithErrorHandling (runtime-core.esm-bundler.js:173:22) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:182:21) at HTMLDivElement.invoker (runtime-dom.esm-bundler.js:345:9) handleInput @ At.vue:296 onInput._cache. ._cache. @ AtTemplate.vue:7 callWithErrorHandling @ runtime-core.esm-bundler.js:173 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182 invoker @ runtime-dom.esm-bundler.js:345
@fannyfan414 seems there is a typo in your snippet 😄
// Wrong
import AtTa from "vue-at/dist/vue-at";
// Correct
import At from "vue-at";
import AtTa from "vue-at/dist/vue-at-textarea";
And the error stack also shows that it is At.vue
running instead of AtTextarea.vue
caught TypeError: Cannot read properties of null (reading 'innerHTML')
at Proxy.handleInput (At.vue:296:21)
at onInput._cache.._cache. (AtTemplate.vue:7:13)
Hi, i'm try to use vue-at with quasar framework (same as vuetify, elementui and others)
Not working code example