Support Quasar v-input

[fannyfan414]

Hi, i'm try to use vue-at with quasar framework (same as vuetify, elementui and others)

Not working code example

 <at-ta :members="members">
        <q-input
          v-model="name"
          type="textarea"
          :rows="1"
          :autogrow="false"
          resize="none"
        />
      </at-ta>

[fritx]

@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>

[fannyfan414]

@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

[fritx]

@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)