Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chat message doesn't render #88

Closed
AbhimanyuAryan opened this issue Feb 3, 2023 · 5 comments
Closed

chat message doesn't render #88

AbhimanyuAryan opened this issue Feb 3, 2023 · 5 comments
Assignees

Comments

@AbhimanyuAryan
Copy link
Member

DEMO:

using GenieFramework
@genietools

@app begin
  @out textmsg1 = "['hey, how are you?']"
  @out textmsg2 = "['I am good']"
end

function ui()
  [
    Html.div(class="q-pa-md row justify-center",[
      Html.div(style="width: 100%; max-width: 400px",[
        chatmessage(:textmsg1, name="abhi")
        chatmessage(:textmsg2, name="adrian")
      ])
    ])
  ]
end

@page("/", ui)

Server.isrunning() || Server.up()

now the code is correct and the output html is also correct. I can see in vue console but nothing renders on screen

asdfdsafds

@AbhimanyuAryan
Copy link
Member Author

@hhaensel have you seen this issue before. I am completely lost why is this happening. Could be CSS rendering and style issue? I am debugging this but if you know what's happening please let me know

@hhaensel
Copy link
Member

hhaensel commented Feb 3, 2023

You need to bind vectors of String:

@app begin
  @out textmsg1 = ["hey, how are you?"]
  @out textmsg2 = ["I am good"]
end

function ui()
  [
    Html.div(class="q-pa-md row justify-center",[
      Html.div(style="width: 100%; max-width: 400px",[
        quasar(:chat__message, text = :textmsg1, name="abhi", sent = true)
        quasar(:chat__message, text = :textmsg2, name="adrian")
      ])
    ])
  ]
end

route("/") do
  model = @init
  page(model, ui()) |> html
end

EDIT: I had to change the routing, because somehow page always wants to cache the page and doesn't understand the quasar() output.
@essenciary not sure where this happens and how to get around this.

@hhaensel
Copy link
Member

hhaensel commented Feb 3, 2023

image

@hhaensel
Copy link
Member

hhaensel commented Feb 3, 2023

Why is this? (Not necessarily to @AbhimanyuAryan but to everyone who is developing a new feature which is not yet incorporated in StippleUI and hasn't got a lot of experience with Vue.js)
The demo code on quasar looks like this:

<q-chat-message
        name="me"
        :text="['hey, how are you?']"
        sent
      />

Note that the text is preceded by a colon which means that the content is evaluated as javascript expression in the name space of the vue model. That means that the content is an array of strings. If you would have written the text explicitly as in the example, you would have seen a correct result. But if you bind it to a variable that variable needs to contain an array of strings.

@hhaensel
Copy link
Member

@AbhimanyuAryan please close this if you are fine with the responses

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants