Skip to content

Commit

Permalink
fix: [Vue warn]: Missing ref owner context. ref cannot be used on hoi…
Browse files Browse the repository at this point in the history
…sted vnodes. -- #137

seems could not use `:ref="xxx"` not more here
  • Loading branch information
fritx committed Aug 8, 2022
1 parent 53e7d1e commit 2328dea
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 17 deletions.
4 changes: 2 additions & 2 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div id="app">

<!--
migration.2
vue3 migration.2
fix: [Vue warn]: (deprecation COMPONENT_V_MODEL) v-model usage on component has changed in Vue 3. Component that expects to work with v-model should now use the "modelValue" prop and emit the "update:modelValue" event. You can update the usage and then opt-in to Vue 3 behavior on a per-component basis with `compatConfig: { COMPONENT_V_MODEL: false }`.
Details: https://v3-migration.vuejs.org/breaking-changes/v-model.html
-->
Expand All @@ -19,7 +19,7 @@
</template>

<!--
migration.4
// vue3 migration.4
fix: [Vue warn]: (deprecation ATTR_ENUMERATED_COERCION) Enumerated attribute "contenteditable" with v-bind value `` will render the value as-is instead of coercing the value to "true" in Vue 3. Always use explicit "true" or "false" values for enumerated attributes. If the usage is intended, you can disable the compat behavior and suppress this warning with:
configureCompat({ ATTR_ENUMERATED_COERCION: false })
Details: https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html
Expand Down
31 changes: 20 additions & 11 deletions src/At.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
<script>
// fixme: todo: migration.6
// [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes.
// A vnode with ref must be created inside the render function.
// at selectByMouse
// at handleItemHover
import {
closest, getOffset, getPrecedingRange,
getRange, applyRange,
Expand Down Expand Up @@ -141,7 +134,7 @@ export default {
}
},
mounted () {
// migration.5
// vue3 migration.5
// [Vue warn]: (deprecation INSTANCE_SCOPED_SLOTS) vm.$scopedSlots has been removed. Use vm.$slots instead.
// Details: https://v3-migration.vuejs.org/breaking-changes/slots-unification.html
if (this.$slots.embeddedItem) {
Expand Down Expand Up @@ -381,7 +374,16 @@ export default {
},
scrollToCur () {
const curEl = this.$refs.cur[0]
// vue3 migration.6
// fix: [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes.
// A vnode with ref must be created inside the render function.
// at selectByMouse
// at handleItemHover
// const curEl = this.$refs.cur[0]
let { wrap } = this.$refs
let { cur } = this.atwho
const curEl = wrap.querySelector(`.atwho-li[data-index="${cur}"]`)
const scrollParent = curEl.parentElement.parentElement // .atwho-view
scrollIntoView(curEl, scrollParent)
},
Expand Down Expand Up @@ -475,8 +477,15 @@ export default {
if (customsEmbedded) {
// `suffix` is ignored as `customsEmbedded=true` has to be
// wrapped around by spaces
const html = this.$refs.embeddedItem.firstChild.innerHTML
this.insertHtml(html, r);
// vue3 migration.7
// fix: Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML')
// at Proxy.insertItem (At.vue?075e:490:1)
// at Proxy.handleItemClick (At.vue?075e:184:1)
// const html = this.$refs.embeddedItem.firstChild.innerHTML
const html = this.$refs.embeddedItem.firstElementChild.innerHTML
this.insertHtml(html, r)
} else {
const t = itemName(curItem) + suffix
this.insertText(t, r);
Expand Down
1 change: 0 additions & 1 deletion src/AtTemplate.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
class="atwho-li"
:key="index"
:class="isCur(index) && 'atwho-cur'"
:ref="isCur(index) && 'cur'"
:data-index="index"
@mouseenter="handleItemHover"
@click="handleItemClick"
Expand Down
6 changes: 3 additions & 3 deletions src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,20 @@ import App from './App.vue'
// Vue.use(ElementUI)

configureCompat({
// migration.3
// vue3 migration.3
// fix: [Vue warn]: (deprecation WATCH_ARRAY) "watch" option or vm.$watch on an array value will no longer trigger on array mutation unless the "deep" option is specified. If current usage is intended, you can disable the compat behavior and suppress this warning with:
// configureCompat({ WATCH_ARRAY: false })
// Details: https://v3-migration.vuejs.org/breaking-changes/watch.html
WATCH_ARRAY: false,

// migration.4
// vue3 migration.4
// fix: [Vue warn]: (deprecation ATTR_ENUMERATED_COERCION) Enumerated attribute "contenteditable" with v-bind value `` will render the value as-is instead of coercing the value to "true" in Vue 3. Always use explicit "true" or "false" values for enumerated attributes. If the usage is intended, you can disable the compat behavior and suppress this warning with:
// configureCompat({ ATTR_ENUMERATED_COERCION: false })
// Details: https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html
ATTR_ENUMERATED_COERCION: false,
})

// migration.1
// vue3 migration.1
// fix: [Vue warn]: (deprecation GLOBAL_MOUNT) The global app bootstrapping API has changed: vm.$mount() and the "el" option have been removed. Use createApp(RootComponent).mount() instead.
// Details: https://v3-migration.vuejs.org/breaking-changes/global-api.html#mounting-app-instance
let app = createApp(App)
Expand Down

0 comments on commit 2328dea

Please sign in to comment.