nodejs创建vue项目_vue数据不渲染

nodejs创建vue项目_vue数据不渲染tl;dr:GivenaVueJSVNodeobject,howdoIgettheHTMLelementthatwouldbegeneratedifitwererendered?e.g.:>temp1VNode{tag:”h1″,data:undefined,children:Array(1),text:undefined,elm:…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

nodejs创建vue项目_vue数据不渲染

tl;dr:

Given a VueJS VNode object, how do I get the HTML element that would be generated if it were rendered?

e.g.:

> temp1

VNode {tag: “h1”, data: undefined, children: Array(1), text: undefined, elm: undefined, …}

> temp1.children[0]

VNode {tag: undefined, data: undefined, children: undefined, text: “Test”, elm: undefined, …}

> doSomething(temp1)

Test

Goal

I’m attempting to build a small VueJS wrapper around the DataTables.net library.

To mimic the behavior of HTML tables in my markup, I want something like the following:

NameAgeSalary

{
{ person.name }}{
{ person.age }}{
{ person.salary }}

What I’ve done so far

I’ve started to implement this as follows:

DataTable.vue

/* global $ */

export default {

data: () => ({

instance: null

}),

mounted() {

this.instance = $(this.$refs.table).dataTable();

this.$el.addEventListener(“dt.row_added”, function(e) {

this.addRow(e.detail);

});

},

methods: {

addRow(row) {

// TODO

console.log(row);

}

}

};

DataTableRow.vue

/* global CustomEvent */

export default {

mounted() {

this.$nextTick(() => {

this.$el.dispatchEvent(new CustomEvent(“dt.row_added”, {

bubbles: true,

detail: this.$slots.default.filter(col => col.tag === “td”)

}));

});

},

render() { return “”; }

};

What this currently does:

When the page loads, the DataTable is initialized. So the column headers are properly formatted and I see “Showing 0 to 0 of 0 entries” in the bottom left

The CustomEvent is able to bubble up past the

and be caught by the DataTable element successfully (circumventing the limitation in VueJS that you can’t listen to events on slots)

What this does not do:

Actually add the row

My event is giving me an array of VNode objects. There’s one VNode per column in my row. The DataTables API has an addRow function which can be called like so:

this.instance.row.add([“col1”, “col2”, “col3”]);

In my case, I want the resultant element from the rendering of the VNode to be the elements in this array.

var elems = [];

for (var i = 0; i < row.length; i++)

elems[i] = compile(row[i]);

this.instance.row.add(elems);

Unfortunately this compile method eludes me. I tried skimming the VueJS documentation and I tried Googling it, but no dice. I tried manually passing the createElement function (the parameter passed to the render method) but this threw an error. How can I ask VueJS to render a VNode without injecting the result into the DOM?

解决方案

I ran into the same issue wanting to do basically the same thing with a row details template for DataTables.net.

One solution could be to create a generic component that renders out a VNode and instantiate that programmatically. Here is how my setup for a dynamic detail row that I insert using datatable’s row.child() API.

RenderNode.js

export default {

props: [‘node’],

render(h, context) {

return this.node ? this.node : ”

}

}

Datatables.vue

Include the renderer component from above

import Vue from ‘vue’

import nodeRenderer from ‘./RenderNode’

Instantiate and mount the renderer to get the compiled HTML

// Assume we have `myVNode` and want its compiled HTML

const DetailConstructor = Vue.extend(nodeRenderer)

const detailRenderer = new DetailConstructor({

propsData: {

node: myVNode

}

})

detailRenderer.$mount()

// detailRenderer.$el is now a compiled DOM element

row.child(detailRenderer.$el).show()

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234437.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 从源代码到可执行文件

    在理解一个源代码是如何成为可执行文件时,我简单的回顾下硬件层面、操作系统层面的知识。开机启动一BIOS扫描基本设备,cpu、memory、displayetc,从硬盘启动,读盘面1磁道1扇区1

    2021年12月25日
  • JS保留3位小数_保留一位小数表示精确到几位

    JS保留3位小数_保留一位小数表示精确到几位今天朋友面试,遇到一道面试题,写一个方法实现传入的参数数字保留三位小数//保留3位小数functionname(params){letnewpar=parseFloat(params);letreg=/^[0-9]+.?[0-9]*$/;if(reg.test(newpar)){letnewNum=newpar.toFixed(3);return…

    2022年10月31日
  • DataGrip 2021激活码(注册激活)

    (DataGrip 2021激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlMLZPB5EL5Q-eyJsaWNlbnNlSWQi…

  • SpringCloud与Dubbo区别[通俗易懂]

    SpringCloud与Dubbo区别[通俗易懂]SpringCloud和Dubbo都是当下流行的RPC框架,各自都集成了服务发现和治理组件。SpringCloud用Eureka,Dubbo用Zookeeper,这篇博客就将将这两个组件在各自系统中的作用机制的区别。1.注册的服务的区别Dubbo是基于java接口及Hession2序列化的来实现传输的,Provider对外暴露接口,Consumer根据接口的规则调用。也就是Provider向Zookeeper注册的是接口信息,Consumer从Zookeeper发现的是接口的信息,通过接口的name

  • latex大括号错位显示_LaTeX表格

    latex大括号错位显示_LaTeX表格amsmath中\smash妙用样例-大括号错位显示。原始大括号显示\[\text{机器学习}\begin{cases}\text{~~监督学习~}{\begin{cases}\text{回归算法}\\\text{分类算法}{\begin{cases}\text{生成模型}\\\text{判别模型}\end{cases}}

    2022年10月11日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号