library(htmltools)
library(vuer)
library(magrittr)
# Example 1: Hello World
tags$div("{{ message }}") %>%
Vue(data = list(message = 'Hello World'))
# Example 2:
tags$span(
"v-bind:title" = "message",
"Hover your mouse over me for a few seconds to see my dynamically bound title!"
) %>%
Vue(data = list(
message = htmlwidgets::JS("'You loaded me on ' + new Date()")
))
# Example 3:
tags$div(id = 'app',
tags$h3("Use the checkbox to toggle visibility of the message"),
tags$input(type = "checkbox", "v-model" = "seen"),
tags$span("v-if" = "seen", "Now you see me again")
) %>%
Vue(data = list(seen = TRUE))
# Example 4: Lists
tags$li("v-for" = "column in columns", "{{ column }}") %>%
tags$ul(id = 'app') %>%
Vue(data = list(columns = names(mtcars)))
# Example 5:
tags$div(id = 'app',
tags$input(type = 'text', "v-model" = "message"),
tags$p("{{ message }}"),
tags$button("v-on:click" = "reverseMessage", "Reverse Message")
) %>%
Vue(
data = list(message = 'Hello World'),
methods = list(
reverseMessage = htmlwidgets::JS("function(){
this.message = this.message.split('').reverse().join('')
}")
)
)
# Example 6
tags$div(id = "app",
tags$button("v-on:click" = "handleClick",
"Clicked {{ count }} {{ count === 1 ? 'time' : 'times' }}"
)
) %>%
Vue(
data = list(count = 0),
methods = list(
handleClick = htmlwidgets::JS("function(){
this.count += 1
}")
)
)
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.